How do I "navigate" to a new page on my dashboard?

[TonySeeley]

Hi,

I've successfully created a mobile minimalist dashboard that I'm really pleased with. The home page has rooms on it, and when you click on a room, it changes the home page to the room page. Then at the top of the room page I can go back to home - all works fine.

So now I've created a tablet dashboard and want to do the same thing (kind of).

Here's a pic of my "home" tablet page.

The left side of the page (shown with a yellow dotted line) is my side bar and I want that to remain there all the time. But the right side (shown with a red dotted line) is the part I want to change when I click on a room.

I just can't get this to work!

For the mobile site, I just added path's to the top of each room page and included the pages in the main mobile dashboard yaml file - which showed the first in the list by default (main) and allowed me to swap.

But how do I do this when I have a layout grid with both a side bar and main section that i want to replace?

Any help here would be really appreciated, I've been fighting this now for a few days lol.

Thanks,

Tony

[TonySeeley]

So after a few more hours :( I've found a way round this. Basically I've made each "room" including the home page, a single page. Originally I had a sidebar page and a main page.

If I join them together for every room I can make this work (just like the mobile site - except bigger).

While this is ok, it requires I copy the sidebar to EVERY room, and if I make a change I have to copy the code everywhere.

Before anyone suggests, I've tried !include, which works but mucks up the formatting of my grid :(

Oh well.

If anyone has a better solution I'd love to hear it.

Thanks,

Tony

[StarScream159]

I know you said "before anyone says used !include" that's what I was going to suggest lol.

I have only a mobile (cellphone) layout that I have a common chip element to include along the top of each room. Instead of having the chips on each page coded, I coded them once and then !included them on each room.

path: "home"
icon: "mdi:home"
cards:
  - type: "horizontal-stack"
    cards: !include includes/chips.home.yaml
  - type: "vertical-stack"
    cards:
      - type: grid
        columns: 1
        square: false
        cards: !include includes/conditional.media_players.yaml
      - type: grid
        columns: 2
        square: false
        cards:
          - type: "custom:button-card"
            template: card_person
            entity: person.husband
            variables:
              ulm_card_person_entity: person.husband
              ulm_card_person_use_entity_picture: true
              ulm_card_person_icon: mdi:face-man
              ulm_card_person_battery: sensor.mi_mix_battery_level
          - type: "custom:button-card"
            template: card_person
            entity: person.wife
            variables:
              ulm_card_person_entity: person.wife
              ulm_card_person_use_entity_picture: true
              ulm_card_person_icon: mdi:face-woman
      - type: grid
        columns: 2
        square: false
        cards:
          - type: "vertical-stack"
            cards:
              - type: "custom:button-card"
                template: card_graph
                entity: sensor.main_floor_temperature_measurement
                variables:
                  ulm_card_graph_color: "var(--google-red)"
                  ulm_card_graph_name: Thermostat Temp/Humidity
                  ulm_card_graph_entity: "sensor.main_floor_temperature_measurement"
                  ulm_card_graph_color2: "var(--google-green)"
                  ulm_card_graph_entity2: sensor.main_floor_relative_humidity_measurement
                  ulm_card_graph_type: fill
                  ulm_card_graph_hours: 24
                  ulm_card_graph_group_by: interval
                  ulm_card_graph_line_width: 5
              - type: "custom:button-card"
                template: card_thermostat
                entity: climate.main_floor
                variables:
                  ulm_card_thermostat_enable_collapse: false
                  ulm_card_thermostat_enable_controls: true
                  ulm_card_thermostat_enable_hvac_modes: false
                  ulm_card_thermostat_enable_popup: true
          - type: "vertical-stack"
            cards:
              - type: "custom:button-card"
                template: custom_card_damix48_power_details
                entity: sensor.energy_monitor_upstairs_total_home_watts
                variables:
                  ulm_card_power_details_name: Whole Home Watts
                  ulm_card_power_details_entity: sensor.energy_monitor_upstairs_total_home_watts
                  ulm_card_power_details_hours: 2
                  ulm_card_power_details_24hour: true
                  ulm_card_power_details_height: 250
                  ulm_card_power_details_thresholds:
                    - value: 0
                      color: "#43A047"
                    - value: 2500
                      color: "#FFA600"
                    - value: 3000
                      color: "#DB4437"
...

Surely you could do something similar for your left side area.