How to navigate between panels without entering configuration?

Apps & Services HABPanel
1

Hello community, I have been looking for a way to change the panel with a button that I can include and thus be able to navigate from the panel that I designed for my main room towards the children’s panel.

that is to say change without having to enter the configuration of panels and choose the panel by that means, is there any way to do it with a button that places in habpanel and thus just change them?

And I also wanted to know if I could place sub panels in the habpanel drawer? example:

in the tab of
-Room 1
*Illumination
+ RGB lights
+ LED lights
* HVAC
*Blinds
-Room 2
*Illumination
+ RGB lights
+ LED lights
* HVAC
*Blinds

I hope that the formulation of my doubts is clear thank you very much

2

Here’s what I use; it’s basic HTML with paths to the different panels.

<style>
.buttons {
  border: 1px solid #76899e; 
  border-radius: 1px; 
  padding: 0px; 
  padding-top: 1px; 
  padding-bottom: 1px;
  height:50px;
  width:50px;
}
</style>

<div ng-init='home = {"name": "Home", "type": "button", "action_type": "navigate", "navigate_dashboard": "/"}' />
<div ng-init='weather = {"name": "Weather", "type": "button", "action_type": "navigate", "navigate_dashboard": "Weather"}' />
<div ng-init='triciasoffice = {"name": "T&#39;s Office", "type": "button", "action_type": "navigate", "navigate_dashboard": "Tricias%20Office"}' />
<div ng-init='jaysoffice = {"name": "J&#39;s Office", "type": "button", "action_type": "navigate", "navigate_dashboard": "Jays-Office"}' />
<div ng-init='loft = {"name": "Loft", "type": "button", "action_type": "navigate", "navigate_dashboard": "Loft"}' />
<div ng-init='masterbedroom = {"name": "Master Bedroom", "type": "button", "action_type": "navigate", "navigate_dashboard": "Up%20Stairs"}' />

<div ng-init='kidsrooms = {"name": "Kids Rooms", "type": "button", "action_type": "navigate", "navigate_dashboard": "Kids%20Rooms"}' />
<div ng-init='guestroom = {"name": "Guest Room", "type": "button", "action_type": "navigate", "navigate_dashboard": "Guest%20Room"}' />
<div ng-init='basement = {"name": "Basement", "type": "button", "action_type": "navigate", "navigate_dashboard": "Basement"}' />
<div ng-init='outside = {"name": "Outside", "type": "button", "action_type": "navigate", "navigate_dashboard": "Outside"}' />
<div ng-init='garage = {"name": "Garage", "type": "button", "action_type": "navigate", "navigate_dashboard": "Garage"}' />
<div ng-init='ris = {"name": "RIS", "type": "button", "action_type": "navigate", "navigate_dashboard": "RIS"}' />
<div ng-init='cells = {"name": "Gym", "type": "button", "action_type": "navigate", "navigate_dashboard": "Gym"}' />

<table style="width: 100%; border-collapse: separate; border-spacing: 8px;">
      <tr>
        <td class="buttons"><widget-button ng-model="weather" /></td>
        <td class="buttons"><widget-button ng-model="triciasoffice" /></td>
        <td class="buttons"><widget-button ng-model="jaysoffice" /></td>
        <td class="buttons"><widget-button ng-model="loft" /></td>
        <td class="buttons"><widget-button ng-model="masterbedroom" /></td>
        <td class="buttons"><widget-button ng-model="kidsrooms" /></td>
      </tr>
  
        <tr>
        <td class="buttons"><widget-button ng-model="guestroom" /></td>
        <td class="buttons"><widget-button ng-model="basement" /></td>
        <td class="buttons"><widget-button ng-model="outside" /></td>
        <td class="buttons"><widget-button ng-model="garage" /></td>
        <td class="buttons"><widget-button ng-model="cells" /></td>
        <td class="buttons"><widget-button ng-model="ris" /></td>
      </tr>

</table>

Best, Jay