Custom sidebar loads different cards

[gbcatrinoiu (Bogdan)]

For a couple of weeks, I’ve been working to implement a custom design for my mobile and desktop dashboard.

As you can see in the video, the left side always stays the same and only the right side changes. I achieve that by creating different views, where the left side always contains the same cards and the other one has different cards based on the path.

For the left side, I use decluttering-card custom component, so I only have it once. Even though that saves me a lot, by not having to edit for every single view, the UI is a bit heavy, slow, and jumpy.

Do you guys know any way to have only one view that contains the left cards, and when clicking certainelement, different cards will be loaded on the right side?

[eggman (bertie basset)]

I’ve never used decluttering card, but is it that you think makes things slow?

If so you could try defining the left hand side in a separate yaml file and !include that in each view. You’d still only have one copy to edit, but it wouldn’t depend on any card ‘building/rendering’ it.

[gbcatrinoiu (Bogdan)]

I tried this, but it only works when I don’t have the right-side cards. This is the code for one of the views where I have the sidebar and the cards that should be on the right.

  - title: Bedroom
    path: bedroom
    type: custom:grid-layout
    layout:
      #default
      margin: 0
      grid-gap: var(--custom-layout-card-padding)
      grid-template-columns: 100%
      grid-template-areas: |
        'quick-access'
        'room'
      mediaquery:
        "(min-width: 768px)":
          grid-template-columns: 50% 50%
          grid-template-areas: |
            'quick-access room'
    cards:
      !include sidebar.yaml

      - type: custom:mod-card
        view_layout:
          grid-area: room
        card_mod:
          style:
            .: |
              :host {
                margin: auto 6vw !important;
              }
        card:
          type: custom:layout-card
          layout_type: custom:grid-layout
          layout:
            #default
            margin: 0
            align-self: center
            grid-row-gap: 8px
            grid-template-columns: 140px calc(100% - 140px)
            grid-template-rows: 290px auto
            grid-template-areas: |
              'control more-info'
              'sensors sensors'
          cards:
            - type: custom:mod-card
              view_layout:
                grid-area: control
              card:
                type: custom:light-popup-card
                entity: light.bedroom
                hideIcon: true
                hideState: true
                borderRadius: 18px
              card_mod:
                style:
                  light-popup-card$: |
                    .popup-wrapper {
                      position: relative !important;
                      margin-top: 0 !important;
                    }
                    .range-holder {
                      --slider-height: 290px !important;
                      --slider-width: 132px !important;
                    }
                    input {
                      top: 27% !important;
                      right: unset !important;
                      left: -60% !important;
                      position: relative !important;
                      --slider-height: 290px !important;
                      --slider-width: 132px !important;
                    }

            - type: custom:light-entity-card
              view_layout:
                grid-area: more-info
              entity: light.bedroom_l1
              brightness: false
              hide_header: true
              color_temp: true
              color_picker: true
              full_width_sliders: true
              show_slider_percent: true
              smooth_color_wheel: true
              persist_features: true
              consolidate_entities: true
              card_mod:
                style: |
                  .light-entity-card__color-picker {
                    max-width: 216px;
                    margin: 0 auto;
                  }

            - type: grid
              view_layout:
                grid-area: sensors
              columns: 2
              square: false
              card_mod:
                style: |
                  :host {
                    gap: 24px;
                  }
              cards:
                - type: sensor
                  graph: line
                  entity: sensor.bedroom_temperature
                  detail: 2
                  card_mod:
                    style: |
                      ha-card {
                        overflow: hidden;
                        --accent-color: var(--primary-color);
                      }

                - type: sensor
                  graph: line
                  entity: sensor.bedroom_humidity
                  detail: 2
                  card_mod:
                    style: |
                      ha-card {
                        overflow: hidden;
                        --accent-color: var(--primary-color);
                      }

For the views have only have the include, it works fine. Something is wrong with my indentation but I can’t figure out what.