I used custom_header custom component
david1, thanks custom header seems to be a good workaround.
I also have another issue, on mobile it seems that the 0 width is hiding it on my main tab but not my other tabs. I don’t know if it is just hiding it behind the other cards on my main tab, or if its really gone.
Main Tab:
2nd Tab:
custom_header:
hide_header: true
resources:
- url: /local/sidebar-card.js
type: module
- type: module
url: /local/custom-header.js
- url: /local/layout-card.js
type: module
- url: /community_plugin/light-popup-card/light-popup-card.js
type: module
- url: /local/homekit-panel-card.js
type: module
sidebar:
digitalClock: true
width:
mobile: 20
tablet: 25
desktop: 20
sidebarMenu:
- action: navigate
name: Home
icon: mdi:home
navigation_path: /lovelace/default_view
active: true
- action: navigate
name: Media
navigation_path: /lovelace/media_path
icon: mdi:youtube-tv
- action: navigate
name: Lights
navigation_path: /lovelace/lights_path
icon: mdi:floor-lamp
- action: navigate
name: Music
navigation_path: /lovelace/music_path
icon: mdi:speaker
style: |
:host {
--sidebar-background: #394254;
--sidebar-text-color: #000;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
}
template: |
<li>
{% if now().hour < 5 %} Good Night {{'\U0001F634'}}
{% elif now().hour < 12 %} Goodmorning {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
{% else %} Good Evening {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
views:
####################
#### defualt tab ###
####################
- title: default_view
path: default_view
cards:
- type: entity-filter
entities:
- device_tracker.paulus
state_filter:
- 'home'
card:
type: glance
title: People that are home
- type: thermostat
entity: climate.main_floor
####################
#### Media tab #####
####################
- title: Media
path: media_path
####################
#### Lights tab ####
####################
- title: Lights
path: lights_path
cards:
- type: picture-elements
style: |
ha-card {
background: rgba(42, 46, 48, 1)
}
elements:
- enableColumns: true
popup:
brightnessHeight: 350px
brightnessWidth: 130px
scenesInARow: 2
switchHeight: 300px
switchWidth: 110px
type: 'custom:light-popup-card'
rows:
- columns:
- column: 1
entities:
- entities:
- entity: light.table
icon: 'mdi:ceiling-light'
- entity: light.tv_light_1
- entity: light.tv_light_2
icon: 'mdi:lamp'
####################
#### Music tab ####
####################
- title: Music
path: music_path
Is it possible to have my “default_view” light up when i click my home-assistant link?
Any news to this?
Hi Guys,
Wasnt active for a week so im back to do some work on this now 
@tpx01 so you are right the background is set to a different element where all the cards in your views are rendered i could not get the sidebar in there so what you wan’t is not possible unless you do cut it up or something.
@david1 you asked “Kind of new to yaml…, but how do i associate a “page” with the side bar?” what do you wanna do?
@mkhattab will work on the offStates options to set for what state it should show off or on.
@Bowhuntr11 i didnt expect it to work but i wanted to now if the code could find the header and it can’t which is strange because it works for me with and without the custom header plugin… Do you know how google chrome inspecter works? and wanna check something for me?
And will see about the other tabs, the 0 width just makes it 0 px width so it should not be visible.
@david1 “Is it possible to have my “default_view” light up when i click my home-assistant link?” it the url in your browser for your default view the same as you filled in at the navigation_path? if yes it should light up.
@DBuit: have a look to my latest changes -> https://github.com/TPX01/sidebar-card
I’ve added the possility to either set the sidebar in ‘px’ or ‘%’. Do you see it likely that this option is added? If you want I can do a PR on you repo?
Issues I’ve experienced are mainly due to conflict with custom header. Although this plugin tries to solve it rather nicely I think the option should be removed. Typical issues you’ll see when the header is hidden is that a white space (size of header) is created under the ‘container’. It is way nicer to play with configuration of CH header to let it behave as you must. Like following example:
custom_header:
menu_hide: false
exceptions:
- conditions:
user_agent: Mobile
config:
menu_hide: true
If you really need to hide the custom header it seems better to active the kiosk mode. By doing so there’s no conflict and hassle between the two plugins and they happily co-exist. What’s you opinion on this?
I’ve been playing around with this sidebar card in it really has a lot of potential. Checking now how I can add a custom card (graph card, button card, …) in it similar to Floorplan UI with Color synced lights.
3 Likes
It looks like you’ve made a lot of progress to replicate the view without using a picture-elements card. Great work! Would you mind sharing your config?
Yup, indeed! My main goal is to have something fully scalable on tablet, mobile and desktop. It still needs a lot of polishing but it’s getting there pretty nicely.
I’l try to share it in upcoming weeks.
2 Likes
Good job, my friend.
I liked that way in the sidebar, how can I do it?
I tried to use the style but nothing changes on my bar …
Thanks
The script needs to be adapted still to allow this 
Ok. Thanks, i will wait 
And about this emojis, can i change that?
Because on this tablet not all the icons appear … I have version 6.0.1 android. But in chrome on the PC they all appear. Is it possible to add manually?
I think you’re adressing your questions to @DBuit, right? I’m just adapting the script of @DBuit to my personal need… Just to be clear: I don’t take any credit on the fork. Best case I can only help with some pull requests to help @DBuit out.
@DBuit I can’t get the icons to work. Is there some include missing of some kind? I’ve been looking at this for a couple of hours but can’t see what is what is actually missing. All the imports seem fine.
Sorry, I messed up. Yes it’s more for him … But if you know how to get around this emoji, or if you can add it manually, tell us 
Looking forward to this 
Really happy with the progress on this custom sidebar so far! Icons and the option to use transparency (rgba) would be great!
3 Likes
Hi guys! This looks amazing an I really want to install it
I´m not sure how to install it. I´m on 0.107 and as “ressources” in the config are deprecating i put it into the ressources of the new dashboard manager.
I tried then to enter it via the lovelace raw editor but the sidebar is not appearing. Any clues what I need to do?
This is my Test Config:
sidebar:
clock: true
title: Home
title: Home
views:
- badges: []
cards: []
path: home
title: Home
- badges: []
cards: []
path: test
title: Test
UPDATE: Got it. Installed it manually AND used the configuration resource
UPDATE 2 (the edit button starts to hate me): I´m playing with it a little. I build a new “Sandbox” Dashboard to break nothing.
I put together a menu
It works if I click a button but I´m not able to switch to another view. For Instance:
If I push the “Licht” Button it brings me to the “Licht” Page. So far so good. But I cant switch to another page.
On top: I need to reload the page to make the sidebar visible again everytime I was in settings, logbook or similar.
Are these known issues with 0.107?
Show your configuration that you have. The RAW file
Here you go:
custom_header: {}
sidebar:
clock: true
sidebarMenu:
- action: navigate
active: true
name: Licht
navigation_path: /lovelace-sandbox/licht
- action: navigate
active: true
name: Jalousie
navigation_path: /lovelace-sandbox/Jalousien
- action: navigate
active: true
name: Heizung
navigation_path: /lovelace-sandbox/Heizung
- action: navigate
active: true
name: Sonos
navigation_path: /lovelace-sandbox/Sonos
title: Home
width:
desktop: 20
mobile: 20
tablet: 25
title: Home
views:
- badges: []
cards: []
path: home
title: Home
- badges: []
cards:
- entities:
- light.bad_og
- light.buro
- light.buro_2
title: My Title
type: entities
path: test
title: Licht
- badges: []
cards: []
path: jalousien
title: Jalousien
- badges: []
cards:
- entity: climate.bad_og
type: thermostat
path: heizung
title: Heizung
- badges: []
cards: []
path: sonos
title: Sonos
Update (again): Got the switch now working. Seems that the paths are case sensitive. On top I needed to remove the “Home” category. The issue with the required reload is still existing…
Here is the new one:
custom_header: {}
sidebar:
clock: true
sidebarMenu:
- action: navigate
active: true
name: Licht
navigation_path: /lovelace-sandbox/licht
- action: navigate
active: true
name: Jalousie
navigation_path: /lovelace-sandbox/jalousien
- action: navigate
active: true
name: Heizung
navigation_path: /lovelace-sandbox/heizung
- action: navigate
active: true
name: Sonos
navigation_path: /lovelace-sandbox/sonos
title: Home
width:
desktop: 20
mobile: 20
tablet: 25
title: Home
views:
- badges: []
cards:
- entities:
- light.bad_og
- light.buro
- light.buro_2
title: My Title
type: entities
path: test
title: Licht
- badges: []
cards: []
path: jalousien
title: Jalousien
- badges: []
cards:
- entity: climate.bad_og
type: thermostat
path: heizung
title: Heizung
- badges: []
cards: []
path: sonos
title: Sonos
Pay attention to navigation_path:
I also sometimes have this problem. Whenever I make any changes I always do CTRL + ALT Refresh to update the page. Then if you don’t make any more changes it works fine.
I had other situations that when I was making changes to navigation_path, for him to assume he had to do a “ha core reboot”
You always have to hard refresh the page (In my case)
1 Like