Estimated reading time: 8 Minuten
Als Home Assistant-Nutzer möchtest Du sicherlich eine Benutzeroberfläche, die Deinen individuellen Bedürfnissen entspricht. Home Assistant bietet mit panel_custom zwar eine eigene Möglichkeit zur Sidebar-Anpassung, doch diese ist in ihren Funktionen stark eingeschränkt. Mit panel_custom
kannst Du lediglich eigene Menüpunkte hinzufügen und Icons anpassen. Eine echte Umstrukturierung der Sidebar oder das gezielte Verbergen von Einträgen ist damit nicht möglich.
Hier kommt das Custom Sidebar Plugin ins Spiel. Es bietet Dir viel mehr Flexibilität: Du kannst die Reihenfolge der Elemente ändern, bestimmte Menüpunkte für bestimmte Nutzer oder Geräte anzeigen und sogar das Design anpassen. Damit erhältst Du eine Sidebar, die genau auf Deine Anforderungen zugeschnitten ist.
Für eine detaillierte Anleitung und Erklärung aller Konfigurationsmöglichkeiten empfehle ich das unten verlinkte YouTube-Video. In diesem Video wird ausführlich auf jede einzelne Einstellung eingegangen, sodass du eine umfassende Anleitung zur genauen Einrichtung erhältst. Eventuellen Code aus dem Video findest du in diesem Beitrag, so dass du ihn direkt nutzen kannst ohne abtippen zu müssen.

Was ist Home Assistant?
Home Assistant ist eine Open-Source-Plattform für die Heimautomatisierung, die darauf abzielt, alle Geräte im Haus miteinander zu verbinden und zentral zu steuern. Sie wurde entwickelt, um eine einheitliche Benutzeroberfläche und eine einfache, flexible Steuerung für eine Vielzahl von Smart-Home-Geräten aus unterschiedlichen Ökosystemen zu bieten. Hier sind einige Punkte, die für Home Assistant spechen:
- Kompatibilität: Home Assistant unterstützt Tausende von Geräten und Diensten von verschiedenen Herstellern, einschließlich Beleuchtung, Klimaanlagen, Heizungen, Kameras, Wettersensoren, Sprachassistenten und mehr.
- Lokale Steuerung: Im Gegensatz zu vielen kommerziellen Smart-Home-Plattformen, die auf Cloud-Dienste angewiesen sind, läuft Home Assistant lokal in deinem Netzwerk. Dies bedeutet erhöhte Privatsphäre und Zuverlässigkeit, da deine Smart-Home-Geräte auch ohne aktive Internetverbindung funktionieren.
- Automatisierung und Szenen: Eines der Hauptmerkmale von Home Assistant ist die Möglichkeit, komplexe Automatisierungen und Szenarien zu erstellen. Du kannst beispielsweise Lichter automatisch einschalten lassen, wenn es dunkel wird oder die Heizung einschalten, wenn die Temperatur unter einen bestimmten Wert fällt.
- Einfache Benutzeroberfläche: Home Assistant bietet eine nutzerfreundliche Oberfläche, die es einfach macht, Geräte zu überwachen und zu steuern. Diese Oberfläche ist vollständig anpassbar.
- Integration mit Sprachassistenten: Home Assistant kann mit Sprachassistenten wie Amazon Alexa oder Google Assistant integriert werden, um eine sprachgesteuerte Steuerung deiner Smart-Home-Geräte zu ermöglichen.
- Open-Source und Community-Getrieben: Da Home Assistant Open-Source ist, wird es von einer aktiven Community unterstützt, die ständig neue Integrationen entwickelt und bestehende verbessert.
- Datenschutz und Sicherheit: Als lokal laufende Plattform hat Home Assistant den Vorteil, dass die Daten im eigenen Netzwerk bleiben. Dies schützt die Privatsphäre und erhöht die Sicherheit im Vergleich zu Cloud-basierten Lösungen.
Zusammenfassend ist Home Assistant eine leistungsstarke und flexible Lösung für diejenigen, die ihr Smart Home selbst gestalten und ihre Geräte unabhängig vom Hersteller oder Ökosystem zentral steuern möchten.
Installation von HACS und Integration von Custom Sidebar in Home Assistant
Schritt 1: Installation von HACS in Home Assistant
Home Assistant Community Store (HACS) ist ein benutzerdefiniertes Add-on für Home Assistant, das den Zugriff auf eine Vielzahl von benutzerdefinierten Integrationen und Plugins ermöglicht, die von der Community entwickelt wurden. So installierst du HACS:
- Voraussetzungen prüfen: Stelle sicher, dass dein Home Assistant idealerweise auf dem neuesten Stand ist.
- Download Skript ausführen: Für die Docker-Container Version oder die Core Version ein Terminal öffnen.
- Docker: in den Container einwählen mit:
docker exec -it homeassistant bash
oder (ähnlich) - Core: zum Nutzer wechseln, der Home Assistant ausführt
- Bei beiden Varianten folgenden Befehl ausführen:
wget -O - https://get.hacs.xyz | bash -
- Docker: in den Container einwählen mit:
- Home Assistant neu starten: Nachdem die Dateien kopiert wurden, starte Home Assistant neu.
- HACS in Home Assistant integrieren: Gehe in der Home Assistant-Oberfläche zu „Konfiguration“ > „Integrationen“ > „Hinzufügen“ und suche nach HACS. Füge es hinzu und gib dein GitHub-Token ein, falls du dazu aufgefordert wirst.
Für die Supervised Version gerne nochmal in der Dokumentation von HACS selbst die Installation nachlesen.
Schritt 2: Custom Sidebar-Integration über HACS hinzufügen
Nachdem HACS installiert ist, kann man Custom Sidebar einfach hinzufügen:
- Öffne HACS: Gehe in der Home Assistant-Oberfläche zu HACS.
- Integration suchen: Klicke auf „Integrationen“ und verwenden die Suchfunktion, um nach „Custom Sidebar“ zu suchen.
- Custom Sidebar installieren: Finde Custom Sidebar in der Liste und klicke auf „Installieren“. Dadurch wird die Integration zu deinem Home Assistant hinzugefügt.
- Anpassung in
configuration.yaml
: Damit die Custom Sidebar auch mit einbezogen wird, müssen wir ergänzend etwas in derconfiguration.yaml
hinzufügen. Je nachdem, ob ihr für eure Konfigurationsdatei später YAML oder JSON nutzen wollt, ist da ein kleiner Unterschied (ich empfehle YAML)- YAML:
frontend:
extra_module_url:
– /hacsfiles/custom-sidebar/custom-sidebar-yaml.js - JSON:
frontend:
extra_module_url:
– /hacsfiles/custom-sidebar/custom-sidebar-json.js
- YAML:
- Home Assistant neu starten: Starte Home Assistant erneut, um die Änderungen zu übernehmen.
Abschluss
Mit diesen Schritten hast du HACS erfolgreich in deinem Home Assistant installiert und die Custom Sidebar-Integration hinzugefügt. Diese leistungsstarke Kombination eröffnet eine Welt voller zusätzlicher Funktionen und Anpassungen, die von der Home Assistant-Community entwickelt wurden und werden. Es folgen weitere Blogbeiträge und Videos zu nützlichen Integrationen. Wenn du das nicht verpassen möchtest, abonniere meinen YouTube-Kanal!
Konfiguration der Sidebar
Nach der Installation kannst Du die Sidebar über eine Konfigurationsdatei anpassen. Erstelle dazu im Verzeichnis <config>/www/
eine Datei namens sidebar-config.yaml
oder sidebar-config.json
, abhängig davon, ob Du YAML oder JSON bevorzugst. Eine Beispielkonfiguration findest Du hier.
Ich empfehle dir eine YAML zu erstellen, da du dort im Gegensatz zu JSON auch Kommentare verfassen kannst und Code gegebenenfalls auskommentieren kannst. Die Datei MUSS an dem Ort liegen, da sie sonst nicht erkannt wird. Das kannst du nicht ändern.
Beispiel für sidebar-config.yaml
:
title: 'Mein Zuhause'
sidebar_editable: false
order:
- item: 'Übersicht'
icon: 'mdi:home'
order: 0
- new_item: true
item: Entitäten
href: "/config/entities"
icon_color: 'var(--accent-color)'
info: "{{ states('sensor.entities') }} Entitäten"
icon: mdi:hexagon-multiple
order: 1
- item: 'Karte'
icon: 'mdi:map'
hide: true
- item: 'Einstellungen'
icon: 'mdi:cog'
order: 3
In diesem Beispiel haben wir:
- Den Titel der Sidebar auf „Mein Zuhause“ gesetzt.
- Die Bearbeitbarkeit der Sidebar im Browser deaktiviert.
- Die Reihenfolge der Elemente definiert und das „Karte“-Element ausgeblendet.
- Ein neues Element namens Entitäten angelegt, dass direkt zu den Entitäten führt und dessen Icon Color die Accent-Color vom Theme übernimmt (Standard: orange)



Anpassungsmöglichkeiten
Mit dem Custom Sidebar Plugin für Home Assistant stehen Dir zahlreiche Anpassungsoptionen zur Verfügung:
- Titel und Untertitel: Setze individuelle Titel und Untertitel für die Sidebar.
- Reihenfolge der Elemente: Bestimme, in welcher Reihenfolge die Elemente angezeigt werden sollen.
- Icons: Weise den Sidebar-Elementen spezifische Icons zu.
- Sichtbarkeit: Blende bestimmte Elemente für alle oder nur für bestimmte Benutzer aus.
- Standardpfad: Lege fest, welcher Pfad standardmäßig beim Laden von Home Assistant geöffnet wird.
Eine detaillierte Übersicht aller Konfigurationsoptionen findest Du in der Dokumentation.
Anpassung des Designs
Neben der Funktionalität kannst Du auch das Erscheinungsbild der Sidebar anpassen:
- Farben: Ändere die Farben von Titeln, Icons, Texten und Hintergründen.
- Hintergründe: Setze individuelle Hintergrundbilder oder -farben für die Sidebar und ihre Elemente.
- Benachrichtigungen: Passe die Farben von Benachrichtigungsindikatoren an.
Diese Designoptionen ermöglichen es Dir, die Sidebar optisch an Dein bevorzugtes Theme anzupassen. Weitere Informationen dazu findest Du hier.
Ausnahmen für bestimmte Benutzer oder Geräte
Mit Custom Sidebar kannst Du festlegen, dass bestimmte Sidebar-Konfigurationen nur für bestimmte Nutzer, Geräte oder Browser angewendet werden. Das ist besonders praktisch, wenn Du zum Beispiel für Admins eine andere Sidebar anzeigen möchtest als für normale Nutzer.
Die Konfiguration dieser Ausnahmen erfolgt über den Abschnitt exceptions
in der sidebar-config.yaml
. Dabei kannst Du verschiedene Kriterien definieren, nach denen eine bestimmte Sidebar-Konfiguration angezeigt oder ausgeblendet wird:
- Nach Benutzer: Weise verschiedene Sidebar-Layouts bestimmten Nutzern zu.
- Nach Browser: Zeige eine bestimmte Sidebar nur in bestimmten Browsern an.
- Nach Gerät: Lasse eine angepasste Sidebar für Smartphones, Tablets oder Desktops anzeigen.
- Nach Sprache: Passe die Sidebar basierend auf der Spracheinstellung des Nutzers an.
Umsetzung im YouTube-Video
Fazit
Das Custom Sidebar Plugin bietet Dir die Möglichkeit, die Home Assistant Sidebar perfekt an Deine Bedürfnisse anzupassen. Egal ob Du die Reihenfolge änderst, Menüpunkte versteckst oder das Design individualisierst – mit diesem Plugin hast Du volle Kontrolle über Deine Sidebar. Besonders praktisch sind die Ausnahmen, mit denen Du unterschiedliche Nutzergruppen gezielt ansprechen kannst. Probiere es aus und optimiere Dein Home Assistant Erlebnis!
0 Kommentare