Diese aktualisierte Sidebar-Konfiguration ist die globale Navigation für das Dashboard /dashboard-haus. Sie enthält Datum, digitale Uhr mit Sekunden, die wichtigsten Menüpunkte und mehrere Bottom Cards für direkte Status- und Schnellaktionen.
Was neu ist
- Breite angepasst: Tablet von 25 auf
30, Desktop von 18 auf21. - Abendlicht ergänzt:
light.licht_abendsitzt jetzt als eigene Mushroom Entity Card in den Bottom Cards. - Türstatus erweitert:
lock.aqara_smart_lock_u200undlock.haustur_offnernutzen Glow-Farben für abgeschlossen, offen und Aktion. - Wetter und Vollbild:
weather.weather_at_8215undinput_boolean.fullscreenbleiben direkt in der Sidebar erreichbar. - Kiosk-Mode gekoppelt: Header und Sidebar werden über
input_boolean.fullscreenein- und ausgeblendet.
Kompletter aktueller Sidebar-Code
Vor dem Einsetzen kurz prüfen
- Ersetze Entity-IDs, Pfade und Namen durch deine eigenen Werte.
- Prüfe, ob die genannte Card, Integration oder Erweiterung wirklich installiert ist.
- Teste die Änderung zuerst in einem kleinen Bereich, bevor du das ganze Dashboard umbaust.
sidebar:
width:
mobile: 0
tablet: 30
desktop: 21
title: null
date: true
digitalClock: true
digitalClockWithSeconds: true
dateFormat: dddd DD.MM.YYYY
sidebarMenu:
- name: Start
icon: mdi:home
action: navigate
navigation_path: /dashboard-haus/haus
active: true
- name: Radio
icon: mdi:radio
action: navigate
navigation_path: /dashboard-haus/radio
active: true
- name: Licht
icon: mdi:lightbulb-multiple
action: navigate
navigation_path: /dashboard-haus/licht
active: true
- name: Kamera
icon: mdi:cctv
action: navigate
navigation_path: /dashboard-haus/kamera
active: true
- name: Fenster + Türen
icon: mdi:door-closed
action: navigate
navigation_path: /dashboard-haus/fenster-turen
active: true
- name: Batterie
icon: mdi:battery-high
action: navigate
navigation_path: /dashboard-haus/batterie
active: true
bottomCard:
type: custom:vertical-stack-in-card
cardOptions:
cards:
- type: custom:mushroom-entity-card
entity: light.licht_abend
name: Abendlicht
icon: mdi:lightbulb
icon_color: white
fill_container: true
primary_info: state
secondary_info: name
layout: horizontal
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set state_entity = 'light.licht_abend' %}
{% if is_state(state_entity, 'off') %}
--shape-color: rgb(100, 100, 100) !important;
--icon-color: white !important;
--shape-animation: none;
opacity: 0.6;
--glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
{% elif is_state(state_entity, 'on') %}
--shape-color: rgb(255, 193, 8) !important;
--icon-color: white !important;
--shape-animation: light-glow 1.6s ease-in-out infinite;
opacity: 1;
--glow-1: 0 0 25px 8px rgba(255, 193, 8, 1);
--glow-2: 0 0 55px 18px rgba(255, 193, 8, 0.7);
--glow-3: 0 0 95px 35px rgba(255, 193, 8, 0.45);
--glow-anim: none;
{% else %}
--shape-animation: none;
--glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
opacity: 0.6;
{% endif %}
transform-origin: 50% 50%;
position: relative;
}
.shape::before, .shape::after {
content: '';
position: absolute;
inset: -8px;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);
animation: var(--glow-anim);
}
.shape::after {
inset: -18px;
box-shadow: var(--glow-1);
opacity: 0.9;
animation: var(--glow-anim);
}
@keyframes light-glow {
0% { transform: scale(0.98); }
50% { transform: scale(1.02); }
100% { transform: scale(0.98); }
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 18px;
--card-primary-font-weight: 300;
--card-secondary-font-size: 15px;
--card-secondary-font-weight: 500;
margin-top: -45px;
margin-left: 5px;
text-align: right;
}
.secondary {
font-size: var(--card-primary-font-size) !important;
font-weight: var(--card-primary-font-weight) !important;
color: white !important;
position: absolute;
bottom: 5px;
right: 10px;
}
.primary {
font-size: var(--card-secondary-font-size) !important;
font-weight: var(--card-secondary-font-weight) !important;
{% if is_state('light.licht_abend', 'off') %}
color: rgb(150, 150, 150) !important;
{% elif is_state('light.licht_abend', 'on') %}
color: rgb(255, 193, 8) !important;
{% else %}
color: rgb(150, 150, 150) !important;
{% endif %}
text-align: right;
position: absolute;
top: 5px;
right: 10px;
}
.: |
mushroom-shape-icon {
--icon-size: 40px;
display: flex;
margin: -45px -10px -11px -9px !important;
padding-right: 80px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
border: none;
margin-bottom: 10px;
min-height: 90px !important;
max-height: 90px !important;
height: 90px !important;
padding: 10px 0 !important;
}
- type: custom:mushroom-entity-card
entity: lock.aqara_smart_lock_u200
name: Haustür
icon_color: white
fill_container: true
primary_info: state
secondary_info: name
layout: horizontal
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set state_entity = 'lock.aqara_smart_lock_u200' %}
{% if is_state(state_entity, 'locked') %}
--shape-color: rgb(0, 161, 136) !important;
--icon-color: white !important;
opacity: 1;
--glow-1: 0 0 25px 8px rgba(0, 161, 136, 1);
--glow-2: 0 0 55px 18px rgba(0, 161, 136, 0.7);
--glow-3: 0 0 95px 35px rgba(0, 161, 136, 0.45);
--glow-anim: none;
{% elif is_state(state_entity, 'unlocked') %}
--shape-color: rgb(102, 0, 0) !important;
--icon-color: white !important;
opacity: 1;
--glow-1: 0 0 25px 8px rgba(102, 0, 0, 1);
--glow-2: 0 0 55px 18px rgba(102, 0, 0, 0.7);
--glow-3: 0 0 95px 35px rgba(102, 0, 0, 0.45);
--glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
{% elif is_state(state_entity, 'unlocking') or is_state(state_entity, 'locking') %}
--shape-color: rgb(255, 165, 0) !important;
--icon-color: white !important;
opacity: 1;
--glow-1: 0 0 25px 8px rgba(255, 165, 0, 1);
--glow-2: 0 0 55px 18px rgba(255, 165, 0, 0.7);
--glow-3: 0 0 95px 35px rgba(255, 165, 0, 0.45);
--glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
{% else %}
--glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
opacity: 0.6;
{% endif %}
transform-origin: 50% 50%;
position: relative;
}
.shape::before, .shape::after {
content: '';
position: absolute;
inset: -8px;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);
animation: var(--glow-anim);
}
.shape::after {
inset: -18px;
box-shadow: var(--glow-1);
opacity: 0.9;
animation: var(--glow-anim);
}
@keyframes lock-ultraglow {
0% { opacity: 0.9; filter: brightness(1); }
50% { opacity: 1; filter: brightness(1.4); }
100% { opacity: 0.9; filter: brightness(1); }
}
@keyframes lock-action {
0% { transform: rotate(-25deg) scale(0.96); }
50% { transform: rotate(25deg) scale(1.04); }
100% { transform: rotate(-25deg) scale(0.96); }
}
@keyframes lock-open {
0% { transform: rotate(10deg); }
50% { transform: rotate(18deg); }
100% { transform: rotate(10deg); }
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 18px;
--card-primary-font-weight: 300;
--card-secondary-font-size: 15px;
--card-secondary-font-weight: 500;
margin-top: -45px;
margin-left: 5px;
text-align: right;
}
.secondary {
font-size: var(--card-primary-font-size) !important;
font-weight: var(--card-primary-font-weight) !important;
color: white !important;
position: absolute;
bottom: 5px;
right: 10px;
}
.primary {
font-size: var(--card-secondary-font-size) !important;
font-weight: var(--card-secondary-font-weight) !important;
{% if is_state('lock.aqara_smart_lock_u200', 'locked') %}
color: rgb(0, 161, 136) !important;
{% elif is_state('lock.aqara_smart_lock_u200', 'unlocked') %}
color: rgb(176, 16, 16) !important;
{% else %}
color: rgb(255, 165, 0) !important;
{% endif %}
text-align: right;
position: absolute;
top: 5px;
right: 10px;
}
.: |
mushroom-shape-icon {
--icon-size: 40px;
display: flex;
margin: -45px -10px -11px -9px !important;
padding-right: 80px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
border: none;
margin-bottom: 12px;
min-height: 90px !important;
max-height: 90px !important;
height: 90px !important;
padding: 10px 0 !important;
}
- type: custom:mushroom-entity-card
entity: lock.haustur_offner
name: Tür öffnen
icon_color: white
fill_container: true
primary_info: name
secondary_info: none
layout: horizontal
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set state_entity = 'lock.haustur_offner' %}
{% if is_state(state_entity, 'locked') %}
--shape-color: rgb(0, 161, 136) !important;
--icon-color: white !important;
opacity: 1;
--glow-1: 0 0 25px 8px rgba(0, 161, 136, 1);
--glow-2: 0 0 55px 18px rgba(0, 161, 136, 0.7);
--glow-3: 0 0 95px 35px rgba(0, 161, 136, 0.45);
--glow-anim: none;
{% elif is_state(state_entity, 'unlocked') %}
--shape-color: rgb(102, 0, 0) !important;
--icon-color: white !important;
opacity: 1;
--glow-1: 0 0 25px 8px rgba(102, 0, 0, 1);
--glow-2: 0 0 55px 18px rgba(102, 0, 0, 0.7);
--glow-3: 0 0 95px 35px rgba(102, 0, 0, 0.45);
--glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
{% elif is_state(state_entity, 'unlocking') or is_state(state_entity, 'locking') %}
--shape-color: rgb(255, 165, 0) !important;
--icon-color: white !important;
opacity: 1;
--glow-1: 0 0 25px 8px rgba(255, 165, 0, 1);
--glow-2: 0 0 55px 18px rgba(255, 165, 0, 0.7);
--glow-3: 0 0 95px 35px rgba(255, 165, 0, 0.45);
--glow-anim: lock-ultraglow 2.2s ease-in-out infinite;
{% else %}
--glow-1: none; --glow-2: none; --glow-3: none; --glow-anim: none;
opacity: 0.6;
{% endif %}
transform-origin: 50% 50%;
position: relative;
}
.shape::before, .shape::after {
content: '';
position: absolute;
inset: -8px;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
box-shadow: var(--glow-1), var(--glow-2), var(--glow-3);
animation: var(--glow-anim);
}
.shape::after {
inset: -18px;
box-shadow: var(--glow-1);
opacity: 0.9;
animation: var(--glow-anim);
}
@keyframes lock-ultraglow {
0% { opacity: 0.9; filter: brightness(1); }
50% { opacity: 1; filter: brightness(1.4); }
100% { opacity: 0.9; filter: brightness(1); }
}
@keyframes lock-action {
0% { transform: rotate(-25deg) scale(0.96); }
50% { transform: rotate(25deg) scale(1.04); }
100% { transform: rotate(-25deg) scale(0.96); }
}
@keyframes lock-open {
0% { transform: rotate(10deg); }
50% { transform: rotate(18deg); }
100% { transform: rotate(10deg); }
}
mushroom-state-info$: |
.container {
--card-primary-font-size: 18px;
--card-primary-font-weight: 300;
--card-secondary-font-size: 15px;
--card-secondary-font-weight: 500;
margin-top: 50px;
margin-left: 5px;
text-align: right;
}
.primary {
font-size: var(--card-primary-font-size) !important;
font-weight: var(--card-primary-font-weight) !important;
color: white !important;
position: absolute;
bottom: 5px;
right: 10px;
}
.secondary {
font-size: var(--card-secondary-font-size) !important;
font-weight: var(--card-secondary-font-weight) !important;
{% if is_state('lock.haustur_offner', 'locked') %}
color: rgb(0, 161, 136) !important;
{% elif is_state('lock.haustur_offner', 'unlocked') %}
color: rgb(102, 0, 0) !important;
{% else %}
color: rgb(255, 165, 0) !important;
{% endif %}
top: 5px;
right: 10px;
}
.: |
mushroom-shape-icon {
--icon-size: 40px;
display: flex;
margin: -45px -10px -11px -9px !important;
padding-right: 80px;
}
ha-card {
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 12px));
border: none;
margin-bottom: 10px;
min-height: 90px !important;
max-height: 90px !important;
height: 90px !important;
padding: 10px 0 !important;
}
- type: custom:clock-weather-card
entity: weather.weather_at_8215
hide_clock: true
hide_date: true
hide_forecast_section: true
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
}
- type: custom:button-card
entity: input_boolean.fullscreen
show_state: false
show_icon: true
show_name: false
icon: mdi:arrow-expand
layout: icon_name
size: 15%
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
}
cardStyle: |
:host { width: 100%; }
ha-card { border: none; background: transparent; }
card_mod:
style: |
ha-card {
border: none;
box-shadow: none;
border-radius: 0;
background: transparent;
--stack-card-gap: 8px;
width: 100% !important;
max-width: none !important;
}
style: >
:host {
--sidebar-background: #242424;
--sidebar-text-color: #fff;
--face-color: #fff;
--face-border-color: #fff;
--clock-hands-color: #000;
--clock-seconds-hand-color: #ff4b3e;
--clock-middle-background: #fff;
--clock-middle-border: #000;
--state-input_boolean-on-color: #00a188;
--state-input_boolean-active-color: #00a188;
--state-active-color: #00a188;
--sidebar-selected-text-color: white;
}
.date {
margin-bottom: 0;
color: #00a188;
opacity: 1;
font-size: 25px;
font-weight: 200;
text-align: center;
letter-spacing: -0.05vw;
}
h1.digitalClock.with-seconds {
margin-top: 0;
margin-bottom: 5px;
font-size: 60px;
text-align: center;
line-height: 40px;
font-weight: 400;
color: white;
cursor: default;
}
.sidebarMenu { font-size: 25px; line-height: 24px; font-weight: 400; }
.sidebarMenu li.active::before { background-color: #00a188 !important; }
.sidebarMenu li.active ha-icon { color: white !important; } :host
::slotted(.card-content) { padding: var(--ha-space-4); margin-bottom: 50px;
}
kiosk_mode:
hide_sidebar: "{{ is_state(\"input_boolean.fullscreen\", \"on\") }}"
hide_header: "{{ is_state(\"input_boolean.fullscreen\", \"on\") }}"
non_admin_settings:
kiosk: true
mobile_settings:
hide_header: false
hide_sidebar: false
custom_width: 768Aufbau erklärt
Die Sidebar selbst definiert zuerst die Breite pro Gerätetyp. Danach folgen Datum, Uhr und Menüeinträge. Jeder Menüpunkt navigiert zu einer View im gleichen Dashboard: Start, Radio, Licht, Kamera, Fenster + Türen und Batterie.
sidebarMenubestimmt die sichtbaren Navigationspunkte.bottomCardenthält die Statuskarten am unteren Rand.card_modstylt Mushroom Cards, Glow-Effekte, Abstände und Hintergrund.kiosk_modereagiert auf den Fullscreen Helper.
Anpassen
Passe zuerst die Entity IDs an dein eigenes Home Assistant an. Besonders wichtig sind Licht, Schloss, Wetter und Fullscreen-Helper.
light.licht_abend # Abendlicht unten in der Sidebar
lock.aqara_smart_lock_u200 # Smart Lock Status
lock.haustur_offner # Türöffner / Schlossaktion
weather.weather_at_8215 # Wetter-Entity
input_boolean.fullscreen # Fullscreen- und Kiosk-Schalter