In meinem neuesten Beitrag zeige ich euch, wie ihr eure Home Assistant Navigation auf das nächste Level bringen könnt. Mit der Custom Sidebar-Komponente aus dem Home Assistant Community Store (HACS) habt ihr die Möglichkeit, eure Seiten-Navigationsleiste individuell anzupassen. Das bedeutet: Menüpunkte verschieben, umbenennen, Icons ändern, Farben setzen und sogar neue Menüpunkte hinzufügen – alles ganz nach euren Wünschen. Und das Beste? Es gibt sogar Funktionen für benutzerdefinierte Menüs pro Benutzer!
Hier erfahrt ihr alles Wichtige, inklusive einer Schritt-für-Schritt-Anleitung, wie ihr das Add-on installiert, konfiguriert und optimal nutzt.
Warum die Sidebar personalisieren?
Die Standard-Sidebar von Home Assistant ist nützlich, aber manchmal nicht flexibel genug. Mit der Custom Sidebar könnt ihr die Navigation effizienter gestalten und so schneller auf die wichtigsten Funktionen zugreifen.
Einige Beispiele, was ihr damit machen könnt:
- Direkter Zugriff auf Automationen oder Integrationen.
- Verschiedene Ansichten für verschiedene Benutzer erstellen.
- Nützliche Informationen direkt in der Sidebar anzeigen (z. B. Anzahl aktiver Automationen oder Entitäten).
- Das Design anpassen, etwa durch neue Farben, Icons oder Hintergrundbilder.
Die Custom Sidebar ist perfekt, um Home Assistant noch benutzerfreundlicher und funktionaler zu machen.
Codeabschnitt für die configuration.yaml
frontend:
extra_module_url:
- /hacsfiles/custom-sidebar/custom-sidebar-yaml.jsDie Datei sidebar-config.yaml legt ihr dann im Verzeichnis ‚\<eure-ha-instanz-\config\www‘ ab.
Beispiel für die sidebar-config.yaml
Hier ist mein Beispiel für eine benutzerdefinierte Sidebar-Konfiguration.
title: Tristan's
subtitle: Smartes Heim
icon_color_selected: var(--accent-color)
sidebar_background: peachpuff
order:
- item: Übersicht
name: Dashboard
info: für's Debuggen
order: 0
- item: Energie
icon: mdi:home-lightning-bolt-outline
order: 1
- item: Automationen
icon: mdi:robot
order: 2
new_item: true
href: "/config/automation"
info: |
{{ states.automation | selectattr('state', 'eq', 'off') | list | count }} inaktive | {{ states.automation | selectattr('state', 'eq', 'on') | list | count }} aktive
- item: Node-RED
order: 3
- item: Integrationen
icon: mdi:puzzle
order: 4
new_item: true
href: "/config/integrations"
info: |
{{states('sensor.devices')}} Geräte | {{states('sensor.entities')}} Entitäten
- item: hacs
order: 5
notification: |
[[[
const outdatedHacsEntities = Object.values(entities.update).filter(
(entity) => entity.platform === 'hacs' && is_state(entity.entity_id, 'on')
);
return outdatedHacsEntities.length || '';
]]]
- item: Zigbee2MQTT
name: Z2M
order: 6
- item: Protokolle
icon: mdi:post-outline
order: 7
new_item: true
href: "/config/logs"
- item: calendar
name: Kalender
order: 8
- item: Demo
icon: mdi:test-tube
order: 9
icon_color: orange
info: für Youtube
exceptions:
- user:
- Tristan
extend_from: base
order:
- item: Einstellungen
order: 10
bottom: true
- item: Entwicklerwerkzeuge
icon: mdi:tools
order: 11
bottom: true
- user:
- Sonja
extend_from: base
title: Sonja's
order:
- item: Einstellungen
hide: true
- item: Entwicklerwerkzeuge
hide: trueFazit
Die Custom Sidebar bietet unglaublich viele Möglichkeiten, eure Home Assistant-Oberfläche individuell anzupassen. Mit der Konfiguration in der sidebar-config.yaml könnt ihr das Design und die Funktionalität genau auf eure Bedürfnisse zuschneiden. Egal, ob ihr ein minimalistisches Layout oder eine umfassende Menüstruktur bevorzugt – die Sidebar lässt sich flexibel gestalten.
Falls ihr Fragen habt oder eigene Ideen für die Sidebar einbringen möchtet, schreibt sie in die Kommentare! 😊
Schreibe einen Kommentar