There is an option : showTopMenuOnMobile
You can find the description in the documentation : https://github.com/DBuit/sidebar-card#main-options
Yeah, but that is to show the top on the mobile not to hide it. I would like to see the top menu on my desktop but hide it on the mobile.
ok, I narrowed my issue down to a specific spot.
I have a theme running on my dashboard. I use var(–primary-color) type references to make sure all my theme colors are the same.
However, if I do the same in the context of the sidebar, the colors returned by the var() reference are the HA theme. For example, the background color is blue.
Looking at the snip above, the background color of my theme is black. Using var(–primary-color) for the sidebar background yields blue, matching the navigation bar.
Any way I can get the sidebar to pull my own theme?
Thanks,
H-
Nevermind. Solved it. As I typed, I realized the maybe my theme is only on my dashboard and not global.
Which was the case.
Here is what it looks like
My code for it if anyone is interested:
title: Estate Dashboard
name: estate-dashboard
swipe_nav:
wrap: true
animate: swipe
sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: true
twelveHourVersion: false
period: false
date: true
hideTopMenu: false
hideHassSidebar: false
showTopMenuOnMobile: true
dateformat: dddd, DD MMMM YYYY
style: |
:host {
--sidebar-background: var(--primary-background-color);
--sidebar-text-color: var(--primary-text-color);
--border-radius: 5px;
--face-color: #FFF;
--face-border-color: #FFF;
--clock-hands-color: #000;
--clock-seconds-hand-color: #FF4B3E;
--clock-middle-background: #FFF;
--clock-middle-border: #000;
box-shadow: inset -38px -3px 11px -28px var(--light-primary-color);
border-radius: 15px 0px 0px 15px;
}
#customSidebar {
z-index: 9999!important;
}
.sidebarMenu li {
line-height: 35px!important;
color: var(--primary-text-color)!important;
}
.sidebarMenu li ha-icon {
color: white!important;
}
.bottom {
width: 100% !important;
}
.sidebarMenu li.active {
background-color: var(--light-primary-color)!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
color: white!important;
}
.digitalClock {
padding-bottom: 5px;
padding-top: 15px
}
.digitalClock {
color: rgba(255, 255, 255, 0.7)!important;
font-size: 50px !important;
font-weight: 500!important;
letter-spacing: -0.05vw!important;
text-align: center;
}
.date {
padding-bottom: 10px;
color: rgba(255, 255, 255, 0.3);
font-size: 25px;
font-weight: 300;
text-align: center;
letter-spacing: -0.05vw;
}
.template li {
color: rgba(255, 255, 255, 0.7)!important;
font-size:.1.3vw!important;
font-weight: 200!important;
opacity: 0.3;
letter-spacing: -0.05vw!important;
text-align: center;
}
template: |
<li>
{% 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}}
</li>
Still working on the theme links, but at least it is all tied.
Love this sidebar!!
I also have to make sure I refresh my browser with every change I make otherwise it does not get reflected on my dashboard.
Thanks,
H-
2 Likes
Hello.
Noticed a very strange behavior for the custom sidebar card. Have two lovelace dashboards with sidebar defined in each. The menu contains two items that navigate between the dashboards. If I open the dashboard the “normal” way, the sidebar is show. If I click on the menu item and navigate to the other dashboard, the sidebar is not shown until I refresh the page. The code in each dashboard is as follows:
sidebar:
width:
mobile: 10
tablet: 10
desktop: 10
digitalClock: true
date: true
dateFormat: DD MMM
sidebarMenu:
- action: navigate
navigation_path: /lovelace-house/house
name: House
icon: mdi:home
active: true
- action: navigate
navigation_path: /lovelace-yard/yard
name: Yard
icon: mdi:home-group
active: true
style: |
:host {
–sidebar-background: #505050;
–sidebar-text-color: #FFFFFF;
–face-color: #000000;
–face-border-color: #000000;
–clock-hands-color: #000;
–clock-seconds-hand-color: #FF4B3E;
–clock-middle-background: #FFF;
–clock-middle-border: #000;
}
.sidebarMenu li.active {
icon-size: 225px;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
.title{
text-align: center;
}
@mrpharderwijk looks perfect and i would be happy if you could tell me how you customize the sidebar 
Hi ! Did you manage to make it work for specific users ?
Wonder if you can help me out here, I added the code for active, and wanted to make the icons change color if active I have tried this but still
.sidebarMenu li ha-icon {
color: rgba(0,255,255,0.50)!important;
}
.bottom {
width: 100% !important;
}
.sidebarMenu li.active {
background-image: url("/local/images/black.jpg");
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
color: white!important;
}
still learning to adapt to yaml code but some issues always pop up, like this one, I added this code under the styles and the icons stay locked despite me changing active menu tabs, do these need to go after each menu item, or am I missing something
Great Work !
I have one question about implementation.
Is it possible to extenalize the sidebar configuration to clean the ui-lovelace.yaml file ? like template or others yaml files.
I try this but no success :
sidebar: !include templates/sidebar.yaml
Many HACS frontend addons use the template property to apply a template to the card (style, actions, …) like button-card for example.
Have you similar behavior ?
button_card_templates: !include_dir_merge_named templates/button-card
- type: 'custom:button-card'
template: light_button_style
entity: switch.swi_spot
icon: mdi:pool
name: Spot
Thanks !
Hi @SeLoRBIS
Here is how I externalize the sidebar :
cards:
- type: custom:button-card #extra_styles fix
- !include ui-lovelace/sidebar.yaml
2 Likes
none of the active code works for me, which is a pitty, been working on both early dashboard and this one for a couple of displays in the house, would of been nice to have sidebar with active page highlighted.
Unfortunately, I’ve dropped the use of the sidebar entirely due to loading bugs and it wasn’t working that well for me. The code has been sent to the dark abyss 
1 Like
Hi!
is it posseble to add a card before the clock? i´d like to add home and not-home images of family members on top
Hi @DBuit
I’ve installed this and added some sample code to my raw configuration for my page and a sidebar appears only but it’s just a complete black sidebar with nothing showing no menus or clock etc.
this is the code i’ve tried so far have you any ideas ?
I’m not sure if i need to add any code anywhere else alongside the raw configuration.
Thanks
sidebar:
width:
mobile: 0
tablet: 25
desktop: 20
digitalClock: true
hideTopMenu: false
style: |
:host {
--sidebar-background: #FFF;
--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;
}
sidebarMenu:
- action: navigate
navigation_path: lovelace-mobile/home
name: Home
active: true
- action: navigate
navigation_path: /lovelace-mobile/heating
name: Heating
active: true
- action: navigate
navigation_path: /lovelace-mobile/cameras
name: Cameras
- action: navigate
navigation_path: lovelace-mobile/ground-floor
name: Downstairs
- action: toggle
entity: light.room_lamp
name: Room Lamp
icon: mdi:led-strip-variant
Hi
I’m having an issue that my sidebar isnt always from top to bottom on mobile tablet.
If i hit refresh its from top to bottom , then after x time, it isnt anymore
on laptop theres no issue
any idea?
Edit: it seems only to happen on pages where panel is false,
when using homekit style card with panel true: it doesnt happen
I cant use the panel true on all pages cause i have multiple cards on those