How to make the menu

I am working on a new theme in HABpabel and started with the menu panel based on this example.

I am not familiar with angular directives nor programming too much.
This is what I was able to create so far:

.buttons {
  border: 2px solid; 
  border-radius: 10px; 
  padding: 2px;

<div ng-init='dashboard = {"name": "dahboard", "type": "button", "action_type": "navigate", "navigate_dashboard": "Dashboard", "iconset": "custom-icon", "icon": "control_building_empty", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='livingroom = {"name": "livingroom", "type": "button", "action_type": "navigate", "navigate_dashboard": "Livingroom", "iconset": "custom-icon", "icon": "scene_livingroom", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='kitchen = {"name": "kitchen", "type": "button", "action_type": "navigate", "navigate_dashboard": "Kitchen", "iconset": "custom-icon", "icon": "scene_cooking_alternat", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='scene = {"name": "SCENE", "type": "button", "action_type": "navigate", "navigate_dashboard": "Scene", "font-color": "orange" }' />
<div ng-init='dominik = {"name": "dominik", "type": "button", "action_type": "navigate", "navigate_dashboard": "Dominik", "iconset": "custom-icon", "icon": "scene_teens_room", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='natalia = {"name": "natalia", "type": "button", "action_type": "navigate", "navigate_dashboard": "Natalia", "iconset": "custom-icon", "icon": "scene_teens_room", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='bathroom = {"name": "bathroom", "type": "button", "action_type": "navigate", "navigate_dashboard": "Bathroom", "iconset": "custom-icon", "icon": "scene_bath", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='office = {"name": "office", "type": "button", "action_type": "navigate", "navigate_dashboard": "Office", "iconset": "custom-icon", "icon": "scene_office", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='battery = {"name": "battery", "type": "button", "action_type": "navigate", "navigate_dashboard": "Battery", "iconset": "custom-icon", "icon": "measure_battery_100", "icon_size": 48, "icon_replacestext": true}' />
<div ng-init='settings = {"name": "settings", "type": "button", "action_type": "navigate", "navigate_dashboard": "Settings", "iconset": "custom-icon", "icon": "edit_settings.svg", "icon_size": 48, "icon_replacestext": true}' />

<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
    <td class="buttons"><widget-button ng-model="dashboard" /></td>
    <td class="buttons"><widget-button ng-model="livingroom" /></td>
    <td class="buttons"><widget-button ng-model="kitchen" /></td>
    <td class="buttons"><widget-button ng-model="scene" /></td>
    <td class="buttons"><widget-button ng-model="dominik" /></td>
    <td class="buttons"><widget-button ng-model="natalia" /></td>
    <td class="buttons"><widget-button ng-model="office" /></td>
    <td class="buttons"><widget-button ng-model="bathroom" /></td>
    <td class="buttons"><widget-button ng-model="battery" /></td>
    <td class="buttons"><widget-button ng-model="settings" /></td>

Clicks on icons works but:

  1. I do not know how to make a different background of the “active” button.
    Example: clicking on settings button, HAP Panel switches to setting page but the menu widgets highlights the setting button changing ist background color?
  2. How to make this menu widget responsive?
  3. How to change the font colour of the text in the button (in my case “scene”)

I have the same issue. When I use the buttons which sends some value or navigate, they remain highlighted unless the value is OFF. I don’t know how to fix it yet.