Homeassistant Dashboard Sidebar
HACS-based. Both configurable in YAML mode and UI mode with full drag and drop UI editing, and fully supporting customization through lovelace-card-mod. Detailed docs for customization. Soon to be part of HACS officially
Nothing too crazy, but I saw a need so I built it ¯_(ツ)_/¯
The YAML for the above sidebar is here:
YAML
position: left
width: 240
start_collapsed: false
background: >-
radial-gradient(120% 80% at 15% -10%, rgba(167,139,250,0.55) 0%,
rgba(167,139,250,0) 58%), radial-gradient(90% 55% at 110% 105%,
rgba(34,211,238,0.40) 0%, rgba(34,211,238,0) 55%), linear-gradient(165deg,
#0a0f1f 0%, #141a35 48%, #1d1236 100%)
card_mod:
style: |
.dashboard-sidebar-root {
border-right: 1px solid rgba(148,163,184,0.18);
box-shadow: inset 0 0 70px rgba(124,58,237,0.28);
}
.dashboard-sidebar-category-header {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.72rem;
opacity: 0.85;
}
header:
- type: title
text: MY HOME
align: center
text_color: '#e9d5ff'
card_mod:
style: |
.dashboard-sidebar-title {
background: linear-gradient(90deg,#a78bfa,#22d3ee,#f0abfc,#a78bfa);
background-size: 300% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: 0.20em;
}
- type: clock
format: '%-I:%M %p'
align: center
text_color: '#7dd3fc'
card_mod:
style: |
.dashboard-sidebar-clock {
text-shadow: 0 0 18px rgba(125,211,252,0.55);
font-weight: 400;
}
- type: date
format: '%A, %B %-d'
align: center
text_color: '#94a3b8'
- type: divider
color: rgba(148,163,184,0.30)
body:
- type: item
title: Overview
icon: mdi:view-dashboard-variant
icon_color: '#38bdf8'
text_color: '#e2e8f0'
tap_action:
action: navigate
navigation_path: /sidebar-test/home
- type: item
title: Devices
icon: mdi:devices
icon_color: '#facc15'
text_color: '#e2e8f0'
tap_action:
action: navigate
navigation_path: /sidebar-test/devices
- type: category
title: Rooms
text_color: '#cbd5e1'
icon: mdi:sofa
icon_color: '#a78bfa'
start_collapsed: false
guide_line: true
items:
- title: Living Room
text_color: '#e2e8f0'
icon: mdi:television-classic
icon_color: '#f0abfc'
tap_action:
action: navigate
navigation_path: /sidebar-test/living-room
- title: Kitchen
text_color: '#e2e8f0'
icon: mdi:silverware-fork-knife
icon_color: '#fb7185'
tap_action:
action: navigate
navigation_path: /sidebar-test/kitchen
- title: Basement
text_color: '#e2e8f0'
icon: mdi:stairs-down
icon_color: '#22d3ee'
tap_action:
action: navigate
navigation_path: /sidebar-test/basement
- type: category
title: Garden
text_color: '#cbd5e1'
icon: mdi:sprout
icon_color: '#4ade80'
start_collapsed: true
items:
- title: Irrigation
text_color: '#e2e8f0'
icon: mdi:water
icon_color: '#38bdf8'
tap_action:
action: navigate
navigation_path: /sidebar-test/garden
- title: Grow Lights
text_color: '#e2e8f0'
icon: mdi:lightbulb-on-outline
icon_color: '#fde047'
entity: light.grow_lights
tap_action:
action: toggle
- type: markdown
content: '**{{ states(''sensor.lights_on'') }}** lights on'
align: center
- type: divider
- type: card
align: center
background: rgba(15,23,42,0.45)
card:
type: gauge
entity: sensor.kitchen_minisplit_indoor_temperature
name: Living Room
min: 50
max: 90
severity:
green: 62
yellow: 76
red: 84
card_mod:
style: |
* {
background: none!important;
}
footer:
divider: true
buttons:
- icon: mdi:home
icon_color: '#38bdf8'
title: Home
tap_action:
action: navigate
navigation_path: /sidebar-test/0
- icon: mdi:lightbulb-group
icon_color: '#fde047'
title: All lights
entity: light.all_lights
tap_action:
action: toggle
- icon: mdi:thermostat
icon_color: '#fb7185'
title: Climate
tap_action:
action: navigate
navigation_path: /sidebar-test/climate
- icon: mdi:cog
icon_color: '#94a3b8'
title: Settings
tap_action:
action: navigate
navigation_path: /config/dashboard
- icon: mdi:abacus
tap_action:
action: none
icon_color: aqua
