Hi all
I’m back on the ha game after a couple of years,
I’m having trouble trying to get this sidebar to show, I’ve done the repo bit via hacs then copied the yaml for resources as on GitHub to the raw config editor in the dashboard I use etc
But can’t find,use the sidebar anywhere. I must be doing something stupid!
My dashboard has 4 views for different floors etc all in sections view,
Anyone help?
TIA
Wow… It was wonderful But the pastebin code expired. Could you give more information on how you did it?
sorry but this is an old post of 2 years ago. I’ve changed my setup over the years
If her good taste was like this 2 years ago, I can imagine what she looks like today.
Is there a possibility you can share your setup ?
Yes, please, share your configuration @hiddevanbrussel ! It’s awesome !!
Do you already have an IDEA how to implement it?
Hi, can you please share the code of your dashboard?
looks great.
it is possible to get more information about your dashboard or even a few lines of code
I am in love, if you find time, would you mind to share it?
Hi, has the development been stopped here? Or is there a current alternative to Sidebar?
I’m tinkering with the sidebar card and it’s great!
However i can’t seem to get the template info to show up in any way. Not even by copying other people’s sidecard yaml. Does anyone have an idea why the text doesn’t show up? I can’t find anything about this anywhere…
I’m also using sidebar now and in my case, template is working fine.
Only bottomCard is not working at all, but that’s only a minor issue for me.
Since I do not see a simple alternative, I hope this card will not break in near future.
If code will be ever updated again, my wishes would be to implement some dynamic features, e.g. dynamic card width, dynamic show/hide, coloring of dedicated menu points, …
Here is mine, and everything is working fine ( at least , I don’t see any problems with bottom card)
kiosk_mode:
non_dmin_settings:
kiosk: true
ignore_entity_settings: true
entity_settings:
- entity:
input_boolean.kiosk_mode: 'on'
hide_header: true
hide_menubutton: true
hide_notifications: true
hide_account: true
hide_sidebar: true
- entity:
input_boolean.kiosk_mode: 'off'
hide_header: false
hide_menubutton: false
hide_notifications: false
hide_account: false
hide_sidebar: false
sidebar:
active: true
bottomcard: true
width:
mobile: 0
tablet: 25
desktop: 25
breakpoints:
mobile: 768
tablet: 1000
desktop: 1024
style: |
:host {
--sidebar-background: transparent !important;
--sidebar-text-color: white;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #FFF;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
--sidebar-icon-color: darkorange;
--divider-color: white;
}
.title h1{
text-align: center;
text-color: red;
}
.sidebarMenu li.active {
background-color: rgba(0, 0, 0, 0)!important;
icon-size: 255px;
}
digitalClock: false
twelveHourVersion: true
hideHassSidebar: false
hideTopMenu: false
date: false
dateFormat: dddd DD MMM
clock: false
bottomCard:
type: grid
cardOptions:
columns: 1
square: false
cards:
- type: custom:text-divider-row
text: '-'
text-divider-color: transparent
- type: custom:stack-in-card
cards:
- type: markdown
tap_action:
action: navigate
navigation_path: weather
card_mod:
style:
.: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem
}
ha-markdown-element:second-of-type h1 {
background-color: rgba(0,0,0,0);
color: var(--primary-text-color);
font-weight: normal;
font-size: 10px;
line-height: 3px;
}
content: >
###{% if now().hour < 5 %} Good Night {{'\U0001F634'}} {% elif
now().hour < 12 %} Good Morning {{'\u2615\uFE0F'}} {% elif
now().hour < 18 %} Good Afternoon {{'\U0001F44B\U0001F3FB'}} {%
else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %} ,
{{user}}.<br/> Today is {{ now().strftime('%A') }}, {{
now().strftime('%B') }} {% set suffix = ['st', 'nd', 'rd'] %}{%
set day = now().day %}{% set index = 3 if day // 10 == 1 or day
% 10 == 0 else (day % 10) - 1 %} {{ day~'th' if index > 2 else
day~suffix[index] }} and it's {{ now().strftime('%-I:%M %p') }}.
<br/> Temperature
{{states('sensor.openweathermap_temperature') | int }}°C,
{{states('sensor.openweathermap_condition') }}. <br/> Cat Litter
Box {{ states ('sensor.litter_box_pad_days_left') }} days until
next cleaning. <br/> HVAC Filter need to be changed in {{
states('sensor.hvac_filter_days_left') }} days!
- type: picture
image: /local/MyPictures/OIP-removebg-preview.png
tap_action:
action: navigate
navigation_path: weather
card_mod:
style: |
ha-card {
background-color: transparent !important;
}
card_mod:
style: |
ha-card {
height: 20em !important;
background: linear-gradient(to top, transparent, rgba(var(--frog-rgb-{{states('sensor.weather_frog_status_2')}})) 10%), url({{states('sensor.weather_froggy_picture')}});
background-size: cover, 200% auto;
background-position: bottom left {% if is_state("sensor.weather_frog_location", "field") %}20%{% elif is_state("sensor.weather_frog_location", "hills") %}40%{% else %}10%{% endif %};
background-repeat: no-repeat;
background-blend-mode: saturation;
font-size: 12px;
}
- type: custom:text-divider-row
text: '-'
text-divider-color: white
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: Main Page
secondary: ''
icon: ios:house
icon_color: teal
fill_container: true
tap_action:
action: navigate
navigation_path: main-page
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem;
#width:15px !important;
}
- type: custom:stack-in-card
mode: vertical
card_mod:
style: |
ha-card {
--ha-card-background: transparent;
color: var(--primary-color);
}
cards:
- type: custom:expander-card
card_mod:
style: |
button.open {
background: teal !important;
}
button.close {
background: transparent !important;
}
title-card:
type: custom:mushroom-template-card
primary: First Floor
secondary: '{{ states(''light.first_floor_lights'') }}'
icon: mdi:home-floor-1
icon_color: >-
{%if is_state('light.first_floor_lights', 'off') %} teal
{% else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq',
'on')
| rejectattr('name', 'search', 'First Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Living Room', 'Kitchen', 'Hallway','Kids Room','Garage','My Bathroom'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:mushroom-template-card
primary: Living Room
secondary: '{{ states(''light.living_room_lights'') }}'
icon: mdi:sofa
icon_color: >-
{%if is_state('light.living_room_lights', 'off') %} teal
{% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: living-room
- type: custom:mushroom-template-card
primary: Kitchen
secondary: '{{ states(''light.kitchen_lights_2'') }}'
icon: mdi:pot-steam
icon_color: >-
{%if is_state('light.kitchen_lights_2', 'off') %} teal
{% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: kitchen
- type: custom:mushroom-template-card
primary: Hallway
secondary: '{{ states(''light.hallway_lights'') }}'
icon: mdi:hat-fedora
icon_color: >-
{%if is_state('light.hallway_lights', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: hallway
- type: custom:mushroom-template-card
primary: Kids Room
secondary: '{{ states(''light.kids_fan_down_light'') }}'
icon: mdi:teddy-bear
icon_color: >-
{%if is_state('light.kids_fan_down_light', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: kids-room
- type: custom:mushroom-template-card
primary: Bathroom
secondary: '{{ states(''light.my_bathroom_lights'') }}'
icon: mdi:shower-head
icon_color: >-
{%if is_state('light.my_bathroom_lights', 'off') %} teal
{% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: first-floor-bathroom
- type: custom:mushroom-template-card
primary: Garage
secondary: '{{ states(''light.my_bathroom_lights'') }}'
icon: mdi:go-kart
icon_color: >-
{%if is_state('light.garage_lights_light', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: garage
- type: custom:expander-card
card_mod:
style: |
button.open {
background: teal !important;
}
button.close {
background: transparent !important;
}
title-card:
type: custom:mushroom-template-card
primary: Second Floor
secondary: '{{ states(''light.second_floor_lights'') }}'
icon: mdi:home-floor-2
icon_color: >-
{%if is_state('light.second_floor_lights', 'off') %} teal
{% else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
} ha-card:after { content: " {{ states.light |
selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Second Floor')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Upstairs', 'Master Bedroom', 'Sonia Room','Artem Room', 'Master Bathroom'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:mushroom-template-card
primary: Master Bedroom
secondary: '{{ states(''light.master_bedroom_lights'') }}'
icon: mdi:bed-king
icon_color: >-
{%if is_state('light.master_bedroom_lights', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: master-bedroom
- type: custom:mushroom-template-card
primary: Master Bathroom
secondary: '{{ states(''light.master_bathroom_lights'') }}'
icon: phu:rooms-bathroom
icon_color: >-
{%if is_state('light.master_bathroom_lights', 'off') %}
teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: master-bathroom
- type: custom:mushroom-template-card
primary: Upstairs
secondary: '{{ states(''light.upstairs_lights'') }}'
icon: mdi:escalator-up
icon_color: >-
{%if is_state('light.upstairs_lights', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: upstairs-hallway
- type: custom:mushroom-template-card
primary: Artem Room
secondary: '{{ states(''light.artem_fan'') }}'
icon: mdi:zodiac-taurus
icon_color: >-
{%if is_state('light.artem_fan', 'off') %} teal {% else
%}
amber {% endif %
tap_action:
action: navigate
navigation_path: artem-room
- type: custom:mushroom-template-card
primary: Sonia Room
secondary: '{{ states(''light.sonia_s_bulbs'') }}'
icon: mdi:zodiac-leo
icon_color: >-
{%if is_state('light.sonia_s_bulbs', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: sonia-room
- type: custom:expander-card
card_mod:
style: |
button.open {
background: teal !important;
}
button.close {
background: transparent !important;
}
title-card:
type: custom:mushroom-template-card
primary: Basement
secondary: '{{ states(''light.basement_lights_all'') }}'
icon: mdi:home-floor-b
icon_color: >-
{%if is_state('light.basement_lights_all', 'off') %} teal
{% else %} amber {% endif %}
card_mod:
style: >
ha-card {
background: none !important;
} ha-card:after { content: " {{ states.light |
selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Basement')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Basement', 'Basement Restroom', 'Utility','Office'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
cards:
- type: custom:mushroom-template-card
primary: Basement
secondary: '{{ states(''light.basement_lights'') }}'
icon: mdi:escalator-down
icon_color: >-
{%if is_state('light.basement_lights', 'off') %} teal {%
else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: basement-room
- type: custom:mushroom-template-card
primary: Laundry
secondary: '{{ states(''light.laundry_vanity_light_light'') }}'
icon: mdi:washing-machine
icon_color: >-
{%if is_state('light.laundry_vanity_light_light', 'off')
%} teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: laundry-room
- type: custom:mushroom-template-card
primary: Utility
secondary: '{{ states(''light.utility_room_light_light_2'') }}'
icon: mdi:water-boiler
icon_color: >-
{%if is_state('light.utility_room_light_light_2', 'off')
%} teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: utility-room
- type: custom:mushroom-template-card
primary: Office
secondary: '{{ states(''light.office_light_switch_light'') }}'
icon: hue:room-office
icon_color: >-
{%if is_state('light.office_light_switch_light', 'off')
%} teal {% else %}
amber {% endif %}
tap_action:
action: navigate
navigation_path: office
- type: custom:mushroom-template-card
primary: Outside
secondary: '{{ states(''light.outside_lights'') }}'
tap_action:
action: navigate
navigation_path: outside
icon: phu:outside
icon_color: >-
{%if is_state('light.outside_lights', 'off') %} teal {% else %}
amber {% endif %}
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
margin-left:0rem;
#width:15px !important;
}
ha-card:after {
content: " {{ states.light | selectattr('state', 'eq', 'on')
| rejectattr('name', 'search', 'Outside')
| map(attribute='entity_id') | map('area_name')
| select('in', ['Outside'])
| list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: teal;
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50% 50%;
top: -5px;
left: 40px;
width: 20px;
height: 20px;
font-size: 10px;
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: person.yevgeniy
name: Yevgeniy
button_type: state
show_state: true
styles: |-
.bubble-button-background {
background-color: ${
{
home: 'green',
'Church': 'antique white',
'Dacha': '#7fffd4',
'Дача': '#7fffd4',
'Artem House': '#0d98ba',
'Irina work': '#556b2f',
not_home: '#d2691e',
'Yevgeniy Work': 'teal',
'Parents home': '#b8860b',
'Sonia Home': '#e75480',
'Sonia Work': '#e75480',
}[state] ?? 'red'
}
- type: custom:bubble-card
card_type: button
entity: person.irina
name: Irina
button_type: state
show_state: true
styles: |-
.bubble-button-background {
background-color: ${
{
home: 'green',
'Church': 'antique white',
'Dacha': '#7fffd4',
'Дача': '#7fffd4',
'Artem House': '#0d98ba',
'Irina work': '#556b2f',
not_home: '#d2691e',
'Yevgeniy Work': 'teal',
'Parents home': '#b8860b',
'Sonia Home': '#e75480',
'Sonia Work': '#e75480',
}[state] ?? 'red'
}
- type: horizontal-stack
cards:
- type: custom:bubble-card
card_type: button
entity: device_tracker.life360_sonia
name: Sonia
button_type: state
show_state: true
styles: |-
.bubble-button-background {
background-color: ${
{
home: 'green',
'Church': 'antique white',
'Dacha': '#7fffd4',
'Дача': '#7fffd4',
'Artem House': '#0d98ba',
'Irina work': '#556b2f',
not_home: '#d2691e',
'Yevgeniy Work': 'teal',
'Parents home': '#b8860b',
'Sonia Home': '#e75480',
'Sonia Work': '#e75480',
}[state] ?? 'red'
}
- type: custom:bubble-card
card_type: button
entity: device_tracker.life360_boris_bolembakh
name: Papa
button_type: state
show_state: true
styles: |-
.bubble-button-background {
background-color: ${
{
home: 'green',
'Church': 'antique white',
'Dacha': '#7fffd4',
'Дача': '#7fffd4',
'Artem House': '#0d98ba',
'Irina work': '#556b2f',
not_home: '#d2691e',
'Yevgeniy Work': 'teal',
'Parents home': '#b8860b',
'Sonia Home': '#e75480',
'Sonia Work': '#e75480',
}[state] ?? 'red'
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: teal
tap_action:
action: perform-action
perform_action: input_boolean.toggle
target:
entity_id: input_boolean.kiosk_mode
icon: mdi:menu-open
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
}
- type: action
icon_color: teal
tap_action:
action: navigate
navigation_path: camera-s
icon: mdi:cctv
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
}
- type: action
tap_action:
action: navigate
navigation_path: family
icon: mdi:family-tree
icon_color: teal
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
}
- type: action
tap_action:
action: navigate
navigation_path: weather
icon: mdi:weather-hazy
icon_color: teal
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
}
- type: action
icon_color: teal
tap_action:
action: navigate
navigation_path: ha-info
icon: mdi:memory
card_mod:
style: |
ha-card {
background-color: rgba(0,0,0,0) !important;
box-shadow: none;
}
alignment: center
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
- type: custom:layout-break
thanks for the code, with type: grid it’s also working for me now
Hello, is there a way to set a sidebar icon color based on a input_boolean?
I can modify my desired icon color with the following:
style: |
.sidebarMenu li:nth-child(4) ha-icon{
color: yellow!important;
}
But I am not able modify icon color based on boolean, like:
style: |
[% if is_state('input_boolean.new_movie', 'on') %]
.sidebarMenu li:nth-child(4) ha-icon{
color: yellow!important;
}
[% endif %]
Is something like this possible with sidebar style?
I’ve read from several people, that the sidebar-card is only showing after a reload. I have this issue since a few weeks too and its kind of annoying.
I couldn’t find any solution so i was hoping to get a tip where to look for a solution.
sidebar:
width:
mobile: 0
tablet: 15
desktop: 15
digitalClock: true
digitalClockWithSeconds: false
twelveHourVersion: false
date: true
dateFormat: dd, DD.MM.
period: false
sidebarMenu:
- action: navigate
navigation_path: /lovelace/overview
name: Overview
active: true
icon: mdi:view-dashboard
- action: navigate
navigation_path: /lovelace/2
name: Licht
active: true
icon: mdi:lightbulb-on
- action: navigate
navigation_path: /lovelace/15
name: Musik
active: true
icon: mdi:music
- action: navigate
navigation_path: /lovelace/kalender
name: Kalender
active: true
icon: mdi:calendar
- action: navigate
navigation_path: /lovelace/rolladen
name: Rolläden
active: true
icon: mdi:window-shutter
- action: navigate
navigation_path: /lovelace/blumen
name: Blumen
active: true
icon: mdi:flower
- action: navigate
navigation_path: /lovelace/kameras
name: Kameras
active: true
icon: mdi:camera
- action: navigate
navigation_path: /lovelace/helene
name: Helene
active: true
icon: mdi:robot-vacuum
- action: navigate
navigation_path: /lovelace/homelab
name: Homelab
active: true
icon: mdi:ip-network
- action: navigate
navigation_path: /energy
name: Energie
active: true
icon: mdi:power-plug-battery
bottomCard:
type: custom:layout-card
cardOptions:
layout_type: custom:grid-layout
cards:
- type: custom:week-planner-card
calendars:
- entity: calendar.stejo
name: SteJo
color: darkred
- entity: calendar.abfallkalender
name: Abfall
days: '4'
startingDay: today
startingDayOffset: 0
hideWeekend: false
noCardBackground: true
compact: true
weather:
showCondition: true
showTemperature: true
showLowTemperature: false
useTwiceDaily: false
entity: weather.forecast_home
locale: de
showLocation: false
hidePastEvents: false
hideDaysWithoutEvents: true
hideTodayWithoutEvents: false
combineSimilarEvents: false
showLegend: false
dateFormat: de
texts:
fullDay: Ganztägig
noEvents: Keine Termine
moreEvents: Mehr Termine
today: Heute
tomorrow: Morgen
yesterday: Gestern
columns:
extraSmall: '1'
small: '1'
medium: '1'
large: '1'
extraLarge: '1'
showTitle: true
cardStyle: |
:host ::slotted(.card-content){
padding: 0px !important;
}
- type: conditional
condition: and
conditions:
- condition: state
entity: media_player.spotify_joshude
state_not: idle
- condition: state
entity: media_player.spotify_joshude
state_not: unavailable
card:
type: custom:bubble-card
card_type: media-player
entity: media_player.spotify_joshude
hide:
volume_button: true
power_button: true
next_button: true
previous_button: true
hideTopMenu: false
style: |
:host{
--sidebar-background: var(--ha-card-background,var(--card-background-color,#fff));
}
:host .digitalClock{
font-family: sans-serif;
font-weight: 400;
font-size: 36px;
text-align: center;
}
:host .date{
font-size: 20px;
text-align: center;
}
:host .bottom layout-card{
width: 100%;
}
.sidebar-inner{
padding: 5px !important;
}
.cal-card{
padding: 5px !important;
line-height: 100% !important;
}
.sidebarMenu li {
padding: 5px 20px !important;
}
h1 {
margin-top: 0px !important;
margin-bottom: 0px !important;
}
Thanks!
nice dashboard,
can u share the code for this?
thx
I have recently added a sidebar to my tablet view and I’m running into an issue. I have played around with the width parameter (tablet), changing the value from 0 to 100. Value 0 completely hides the sidebar but anything above that just shows a clipped sidebar card. Has anyone had this happen to them before. I’m losing my mind here. The tablet is an iPad 11 Pro btw
