HACS - Sidebar & KioskMode

[scw2wi]

Ich hab schon vor einiger Zeit eine Sidebar erstellt und komplett darauf vergessen, diese hier vorzustellen.
Nachdem meine Wand-Tabletts nicht wie meine Monitore ein 16:10 sondern ein 16:9 Format bekommen werden, hab ich den restlichen Platz genutzt, um noch ein Menü unterzubringen. Dieses könnte man im Prinzip auch mit einem Array von z.B. button-cards erstellen, einfacher geht es aber mit der Sidebar.

Der Code muss im Raw-Konfigurationseditor vom Dashboard erstellt werden, er ist über das Hamburger-Menü rechts oben erreichbar. Ich hab in diesem Bereich (also vor den views) aktuell nicht nur die Sidebar sondern auch den kiosk_mode und die decluttering_templates.

Hier ein kurzer Auszug der Sidebar, der komplette Code ist unten angehängt.

sidebar:
  active: true
  bottomcard: true
  digitalClock: true
  clock: true
  width:
    mobile: 0
    tablet: 10
    desktop: 10
  breakpoints:
    mobile: 768
    tablet: 1600
  sidebarMenu:
    - action: navigate
      name: Home
      icon: mdi:home
      navigation_path: /haus-1/home
    - action: navigate
      name: Status
      icon: mdi:account-supervisor
      navigation_path: /haus-1/status


  template: |-
    <li>
      {% set stunde = now().hour %}
      {% if stunde  < 8 %}
        Dobro jutro 🌅
      {% elif stunde < 18 %}
        Dobar dan 🌞
      {% elif stunde < 21 %}
        Dobra večer 🌇
      {% else %}
        Laku noć 😴
      {% endif %}
    </li>​
  bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:
        - type: custom:button-card
          name: Kiosk-Mode
          entity: input_boolean.kiosk_mode
          show_icon: false
          tap_action:
            action: call-service
            service: input_boolean.toggle
            service_data:
              entity_id: input_boolean.kiosk_mode
          styles:
            card:
              - height: 40px
              - width: 130px
              - background-color: |-
                  [[[
                    return states['input_boolean.kiosk_mode'].state == 'on'
                      ? 'var(--paper-item-icon-color)'
                      : 'var(--disabled-text-color)';
                  ]]]
          alignment: center

Und so sieht die Sidebar dann aus (der linke Teil mit der Uhr und den Menüpunkten)

HACS Dashboard scw2wi 2025-02-09.png
Was ich noch nicht herausgefunden habe, wie man die Menüpunkte in der Farbe umschalten kann (Geräte und Räume sind noch hardcoded auf Orange). Die Idee dahinter ist, dass alle Seiten wo etwas orange dargestellt wird, die Menüs dazu ebenfalls orange werden, dazu muss die Farb-Umschaltung natürlich steuerbar sein.

Ich bin aber aktuell bereits wieder am nächsten Thema dran, das wird eine Automation für die Bewässerung, passend zum GardenControl, aber auch zu jedem anderen System.

Weitere Beiträge dieser Serie:

HACS Wetterkarte
HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Schieberegler (inkl. Möglichkeiten der Icon Farbanpassung & erste Vorstellung Farbschema)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
HA-Behaglichkeits-Diagramm
HA Kurzeinführung

Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts

[basaltnischl]

Hallo Walther,

ich habe die Sidecar auch getestet, jedoch ist die nicht wirklich an der Seite.
hab ich was vergessen? Ist meine erste Woche mit HS ….

title: My Dashboard
views:
  - title: Home
    path: home
    type: sidebar
    cards:
      - type: custom:sidebar-card
        digitalClock: false
        digitalClockWithSeconds: false
        date: false
        sidebarMenu:
          - action: navigate
            navigation_path: /lovelace/home
            icon: mdi:home
            name: Home
          - action: navigate
            navigation_path: /lovelace/lights
            icon: mdi:lightbulb
            name: Lights
          - action: navigate
            navigation_path: /lovelace/automation
            icon: mdi:cog-outline
            name: Automations
          - action: navigate
            navigation_path: /lovelace/climate
            icon: mdi:thermostat
            name: Climate
          - action: navigate
            navigation_path: /lovelace/security
            icon: mdi:security
            name: Security
        hideTopMenu: true
        hideHassSidebar: true
        width:
          mobile: 0
          tablet: 14
          desktop: 14​

IMG_1057.jpg

[scw2wi]

Hast du den Code über den RAW-Konfigurationseditor eingefügt, so wie ich das beschrieben habe?

Dein Code lautet:

views:
  - title: Home
    path: home
    type: sidebar
    cards:
      - type: custom:sidebar-card
        sidebarMenu:​
          ...

Mein Code sieht jedoch komplett anders aus:

sidebar:
  ...
  sidebarMenu:
    ...
views:
  - type: sections
    title: Home
    path: home
    sections:
​

Erkennst du den Unterschied?
Bei mir ist die Sidebar vor allen Views, bei dir ist sie im ersten View.

[basaltnischl]

Danke, so funktioniert es.