introduce attribute 'showRight' to show sidebar on the right

[Laho812]

This PR will introduce a new attribute 'showRight' which will show the sidebar on the right if set to true. If not defined or false, the sidebar will be shown on the left.
Closes #124

Results in sidebar at the right:

[Laho812]

Here's my yaml code if someone is interested in.
Hint: You can copy the content of bottomCard and paste it into a new card anywhere in your dashboards to change the sidebar content using the GUI.

sidebar:
  showRight: true
  width:
    mobile: 17
    tablet: 17
    desktop: 20
  breakpoints:
    mobile: 768
    tablet: 1024
  style: |
    :host {
        background: center / cover no-repeat fixed url('/local/backgrounds/homekit-bg-4.jpeg');
    }
    @media screen and (min-width: 768px) {
      .bottom {
        margin-bottom: auto;
      }
      .sidebar-inner {
        padding: 20px
      }
    }
    @media screen and (max-width: 767px) {
      .bottom {
        margin-top: auto;
        margin-bottom: 30px;
      }
    }
  bottomCard:
    type: vertical-stack
    cardOptions:
      cards:
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 768px)'
              card:
                type: custom:mushroom-title-card
                title: Menü
                title_tap_action:
                  action: none
                subtitle_tap_action:
                  action: none
                alignment: center
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 767px)'
              card:
                type: custom:mushroom-title-card
                title: ' '
                title_tap_action:
                  action: none
                subtitle_tap_action:
                  action: none
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: or
                  conditions:
                    - condition: state
                      entity: sensor.main_kinzig_kreis_aktuelle_warnstufe
                      state_not: '0'
                    - condition: state
                      entity: sensor.main_kinzig_kreis_vorwarnstufe
                      state_not: '0'
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:cloud-alert
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/wetterwarnungen
                badge_color: ''
                icon_color: red
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: or
                  conditions:
                    - condition: state
                      entity: sensor.main_kinzig_kreis_aktuelle_warnstufe
                      state_not: '0'
                    - condition: state
                      entity: sensor.main_kinzig_kreis_vorwarnstufe
                      state_not: '0'
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Wetterwarnungen
                secondary: ''
                icon: mdi:cloud-alert
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/wetterwarnungen
                badge_color: ''
                icon_color: red
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:calendar-text
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /dashboard-wochenplan/wochenplan
                badge_color: ''
                icon_color: green
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Wochenplan
                secondary: ''
                icon: mdi:calendar-text
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /dashboard-wochenplan/wochenplan
                badge_color: ''
                icon_color: green
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: user
                  users:
                    - user_id1
                    - user_id2
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:shield-home
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/alarmpanel
                badge_color: ''
                icon_color: yellow
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: user
                  users:
                    - user_id1
                    - user_id2
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Alarmanlage
                secondary: ''
                icon: mdi:shield-home
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/alarmpanel
                badge_color: ''
                icon_color: yellow
                layout: horizontal
                fill_container: false
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:air-purifier
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/luftreiniger-sz
                badge_color: ''
                icon_color: light-blue
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Luftreiniger
                secondary: ''
                icon: mdi:air-purifier
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/luftreiniger-sz
                badge_color: ''
                icon_color: light-blue
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:robot-vacuum
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /ohne-sidebar/roborock
                badge_color: ''
                icon_color: grey
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Roborock
                secondary: ''
                icon: mdi:robot-vacuum
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/roborock
                badge_color: ''
                icon_color: grey
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: user
                  users:
                    - user_id1
                    - user_id2
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:weather-partly-snowy-rainy
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/weather
                badge_color: ''
                icon_color: blue
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: user
                  users:
                    - user_id1
                    - user_id2
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Wetter
                secondary: ''
                icon: mdi:weather-partly-snowy-rainy
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/weather
                badge_color: ''
                icon_color: blue
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:home-thermometer-outline
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/heizung
                badge_color: ''
                icon_color: red
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Heizung
                secondary: ''
                icon: mdi:home-thermometer-outline
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/heizung
                badge_color: ''
                icon_color: red
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:home-assistant
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/automatisierung
                badge_color: ''
                icon_color: grey
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Automatisierung
                secondary: ''
                icon: mdi:home-assistant
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/automatisierung
                badge_color: ''
                icon_color: grey
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:wifi
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/gast-wlan
                badge_color: ''
                icon_color: grey
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Gäste-WLAN
                secondary: ''
                icon: mdi:wifi
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /lovelace/gast-wlan
                badge_color: ''
                icon_color: grey
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: horizontal-stack
          cards:
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 0px) and (max-width: 1023px)'
              card:
                type: custom:mushroom-template-card
                primary: ''
                secondary: ''
                icon: mdi:floor-plan
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /dashboard-rooms/ubersicht
                badge_color: ''
                icon_color: orange
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
            - type: conditional
              conditions:
                - condition: screen
                  media_query: '(min-width: 1024px)'
              card:
                type: custom:mushroom-template-card
                primary: Räume
                secondary: ''
                icon: mdi:floor-plan
                layout: horizontal
                tap_action:
                  action: navigate
                  navigation_path: /dashboard-rooms/ubersicht
                badge_color: ''
                icon_color: orange
                card_mod:
                  style: |
                    ha-card {
                      background: rgba(0,0,0,0.3)
                    }
        - type: custom:mushroom-template-card
          primary: ''
          secondary: ''
          icon: mdi:arrow-left
          layout: horizontal
          tap_action:
            action: navigate
            navigation_path: /‘[[[window.history.back()]]]’
          badge_color: ''
          icon_color: grey
          card_mod:
            style: |
              ha-card {
                background: rgba(0,0,0,0.3)
              }
    cardStyle: |
      @media screen and (min-width: 768px) {
        :host {
          width: 100%;
        }
      }

[pipip]

Hmmm, for me this does not work. Sidebar stays on the left.

[Laho812]

Have you enabled the attribute? showRight: true
Tbh, the sidebar card is not the most stable thing, but for me the side of it was always correct, on Chrome, Firefox and HA Android companion app.

[pipip]

Have you enabled the attribute? showRight: true Tbh, the sidebar card is not the most stable thing, but for me the side of it was always correct, on Chrome, Firefox and HA Android companion app.

yes, I did. But you are right the sidebar is very "unstable". for me sometimes it appears and sometimes not. I will try to find sth different. Thanks for your quick reply