Lovelace: custom sidebar card

[benm7 (Ben M)]

Thanks a bunch for this, will give it a try! Also, any idea how to remove the background behind the active menu item? Mine seems to come up as a red oval which I am trying to get rid of

[Oliveoiliboil (Oliver)]

Earlier I was using the custom sidebar on my desktop and my phone which has been working flawlessly. Today I bought my first Nest hub but when I try to cast my dashboard through the Google Cast-integration (since CATT doesn’t seem to work anymore) the sidebar doesn’t show up at all.

Any ideas? Anyone had the same issues?

  sidebar:
  digitalClock: true
  date: true
  width:
    mobile: 25
    tablet: 25
    desktop: 25
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home
      name: Home
      icon: mdi:home-outline
      active: true
    - action: navigate
      navigation_path: /lovelace/lampor
      name: Lights
      icon: mdi:lamps-outline
      active: true
    - action: navigate
      navigation_path: /lovelace/scenes
      name: Scenes
      active: true
      icon: mdi:palette-outline
    - action: navigate
      navigation_path: /lovelace/multimedia
      name: Multimedia
      active: true
      icon: mdi:cast
    - action: navigate
      navigation_path: /lovelace/media
      name: Media
      active: true
      icon: mdi:spotify
    - action: navigate
      navigation_path: /lovelace/automations
      name: Automations
      active: true
      icon: mdi:home-automation
    - action: navigate
      navigation_path: /lovelace/oliver
      name: Oliver
      active: true
      icon: mdi:guitar-pick
    - action: navigate
      navigation_path: /lovelace/linnea
      name: Linnea
      active: true
      icon: mdi:cat
  style: |
    :host {
        --sidebar-background: #2b2b2b;
        --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;

[bjm (Brent (the Other Other Kiwi))]

Hey, no idea sorry, the only thing I can suggest is remove the lot and slowly add stuff in line by line, tats how I fixed my stuff LOL

[cromelex]

It doesn’t work for me at all on the Nest Hub, despite working on every other device.

[reppson]

Can someone give me a tipp, how i can change the border color and the mouseover color of the menu? It went to light blue but i don´t know why.

[MrDutchstyler]

As an option under sidebar place this → Style:
It will change background.
The .sidebarMenu li.active gives the color when the link is active.

sidebar:
  style: |
    :host {
        --sidebar-background: #000D29;
        --sidebar-text-color: #BDC1C6;
        --face-color: #00F031;
        --face-border-color: #FFF;
        background-image: linear-gradient(115051deg, #210443, #210c49, #21144e, #221b53, #222158, #1e285d, #1b2e61, #183464, #123c67, #124368, #184a68, #225068);
    }
    .sidebarMenu li.active {
       background-color: rgba(35, 39, 41, 0.6)!important;
       icon-size: 225px;
    }

[Proche72 (Jiri Pragr)]

Hey, this looks awesome, how did you manage to do the top part? thanks

[Proche72 (Jiri Pragr)]

Any possible way how to add also topcard? I would like to have a greeting on the top (I use mushroom title card for this.

[benm7 (Ben M)]

It’s a basic vertical stack and grid to the right of the sidebar. I’ll try and upload code over the next few days, but I have actually dropped this to start a new dashboard anyway

[Proche72 (Jiri Pragr)]

oh, that’s neat. I am always surprised how many thing can one do with the “basic” cards.

[SimplyGardner]

This also looks great! How did you design your header? Would love to include something similar, like the good morning/afternoon greeting, the icon for the weather and the data in the top right

[KSNsmarthomes]

Hi Folk, Am trying to fix my bottom card and its not displaying. Someone to assist me to add a weather card and person card at the bottom my sidebar please. below is my yaml. its messy. Any guideness and improvement please?

‘sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: true
twelveHourVersion: false
period: false
date: true
hideTopMenu: true
hideHassSidebar: true
showTopMenuOnMobile: true
dateformat: dddd, DD MMMM YYYY
width:
desktop: 15
mobile: 0
tablet: 25
breakpoints:
mobile: 768
tablet: 1024
style: |
:host {
–sidebar-background: #000;
–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;
}
#customSidebar {
z-index: 9999!important;
}
.sidebarMenu li {
line-height: 20px!important;
}
.sidebarMenu li ha-icon {
color: #FFF!important;
}
.sidebarMenu li.active {
background-color: #2C2E30!important;
border-radius: 40px!important;
font-weight: bold!important;
}
.sidebarMenu li.active ha-icon {
}
.bottom {
width: 100% !important;
}
.digitalClock {
padding-bottom: 5px;
padding-top: 15px
}
.digitalClock {
font-size: 50px !important;
font-weight: 500!important;
text-align: center;
}
.date {
padding-bottom: 10px;
font-size: 25px;
font-weight: 300;
text-align: center;
}
.template li {
font-size: 5px;
padding-left: 10px;
padding-top: 2px;
}
.sidebar-inner {
padding: 20px;
display: flex;
flex-direction: column;
box-sizing: border-box;
position: fixed;
}
template: |

{% 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 %}

sidebarMenu:
- action: navigate
navigation_path: /sidebar-dash/home
name: Home
active: true
- action: navigate
navigation_path: /sidebar-dash/livingroom
name: Livingroom
icon: phu:rooms-living
- action: navigate
navigation_path: /sidebar-dash/cctv
name: CCTV
icon: mdi:cctv
- action: navigate
navigation_path: /sidebar-dash/bedroom
name: Bedroom
icon: phu:rooms-living
- action: navigate
navigation_path: /sidebar-dash/kitchen
name: Kitchen
icon: phu:rooms-kitchen
bottomCard:
type: vertical-stack
cardOptions:
cards:
- type: horizontal-stack
cards:
- type: “custom:button-card”
color_type: card
color: rgb(255, 255, 255)
icon: mdi:home
- type: “custom:button-card”
color_type: card
color: rgb(255, 255, 255)
icon: mdi:lightbulb
- type: horizontal-stack
cards:
- type: custom:weather-card
entity: weather.dark_sky
views:

• theme: Backend-selected
  title: Home
  icon: mdi:home
  path: home
  badges: []
• theme: Backend-selected
  title: livingroom
  path: livingroom
  icon: phu:rooms-living
  badges: []
  cards: []
• theme: Backend-selected
  title: cctv
  path: cctv
  icon: mdi:cctv
  badges: []
  cards: []
• theme: Backend-selected
  title: bedroom
  path: bedroom
  icon: phu:rooms-bedroom
  badges: []
  cards: []
• theme: Backend-selected
  title: kitchen
  path: kitchen
  icon: phu:rooms-kitchen
  badges: []
  cards: []’

---

[tismondo]

Please use the preformatted text option to share your yaml - we can’t see indentations properly at all here and it makes diagnosing impossible

Like this

[itsboo]

hi…Firstly thanks for the great project…my issues soo far…I Want the date to be below the digital clock but it’s staying above the hand clock , also even I add a title still it doesn’t show at all and also I use auto dark and light themes .triggered by sunrise and sunset … soo is it possible to make somthing in styles that if state it’s sunrise then change to a style and if it’s sunset then chnage to other style?
also I Want the templete good morning thing above and near the clock not below
code i use soo far

sidebar:
  digitalClock: true
  date: true
  clock: true
  tile: home
  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;
    } 
  template: |
    <li>
      {% if now().hour  < 5 %} Goede nacht {{'\U0001F634'}}
      {% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Goedenmiddag {{'\U0001F44B\U0001F3FB'}}
      {% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}
    </li>
  bottomCard:
    type: horizontal-stack
    cardOptions:
      cards:
        - type: custom:button-card
          color_type: card
          color: rgb(255, 255, 255)
          icon: mdi:home
        - type: custom:button-card
          color_type: card
          color: rgb(255, 255, 255)
          icon: mdi:lightbulb
    cardStyle: |
      :host {
        width: 100%;
        background-color:#FFF;
      }
  sidebarMenu:
    - action: navigate
      navigation_path: /side-bar/default_view
      name: Home
      active: true
    - action: navigate
      navigation_path: /side-bar/media
      name: media 

[itsboo]

how does it work for yu…its not working can yu help me out…any way to add?

bottomCard:
    type: horizontal-stack
    cardOptions:
      cards:
        - type: custom:swipe-card
          start_card: 1
          parameters:
            direction: vertical
            slidesPerView: auto
            freeMode: true,
            mousewheel: true,
            freemode: true
            initialSlide: 0
            spaceBetween: 0
            autoHeight: true
            effect: null
            scrollbar:
              hide: true
              draggable: true
              snapOnRelease: true
              autoheight: true
          cards:
            - type: entities
              entities:
                - person.home_automation
            - type: entities
              entities:
                - person.home_automation
            - type: entities
              entities:
                - person.home_automation

[itsboo]

any progress on adding picture background?

[greyskul2005]

the same problem the weather-card does not appear in the bottomCard

sidebar:
title: null
clock: false
digitalClock: true
digitalClockWithSeconds: true
twelveHourVersion: false
period: true
date: true
hideTopMenu: false
hideHassSidebar: false
showTopMenuOnMobile: true
dateformat: dddd, DD MMMM YYYY
sidebarMenu:
- action: navigate
active: true
name: Home
icon: mdi:home
navigation_path: home
bottomCard:
cardOptions:
cards:
- type: weather-forecast
entity: weather.casa
show_current: true
show_forecast: true
views:

• title: Home
  cards:
  • show_current: true
    show_forecast: true
    type: weather-forecast
    entity: weather.casa

[WTPThom (Thomas)]

Hi @DBuit , thanks for the card! I’m very new to Home Assistant and I’m using it to configure my dashboard.
Would it be possible to add a topCard between the date and the sidebarMenu?
I tried to do it myself by forking the project and duplicating what’s mentioning the bottomCard but it didn’t work.
In the end I’d like to add the person presence badges there!
Thanks !

[Dave888]

Sorry to re-post this, but I’m still having issues, and hoping someone might have some ideas…

I’ve added the sidebar to my config, and it seems to be working ok apart from the bottom bar. I have added the below config, and the 3 buttons in the bottom bar sometimes display, and sometimes don’t.

After some investigation, it appears like the following is happening:

• If the three buttons are also configured in the ‘view’ that is initially opened, then the buttons also appear in the side bar
• If the three buttons are not included in the view config, then the buttons don’t appear in the side bar

Have played around, cleared caches etc, also looked at this link which @markus78 had previously posted, but nothing seems to make a difference to the above behaviour

Any thoughts much appreciated!

Thanks!

Sidebar Config:

 sidebar:
  digitalClock: true
  date: true
  dateFormat: ddd DD MMMM
  width:
    tablet: 20
    desktop: 20
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace/home
      name: Home
      icon: mdi:home
      active: true
    - action: navigate
      navigation_path: /lovelace/music
      name: Music
      icon: mdi:music
    - action: navigate
      navigation_path: /lovelace/climate
      name: Climate
      icon: mdi:temperature-celsius
    - action: navigate
      navigation_path: /lovelace/cameras
      name: Cameras
      icon: mdi:cctv
  bottomCard:
    type: horizontal-stack
    cardOptions:
      cards:
        - type: button
          entity: binary_sensor.bluey
          name: Bluey
          show_name: true
          show_icon: true
          show_state: false
          tap_action:
            action: none
          theme: Sidebar Cats
        - type: button
          entity: cover.garage_door_msg100_main_channel
          name: Garage
          show_icon: true
          show_name: true
          show_state: false
          tap_action:
            action: toggle
          theme: Sidebar Garage
        - type: button
          entity: binary_sensor.bandit
          name: Bandit
          show_name: true
          show_icon: true
          show_state: false
          tap_action:
            action: none
          theme: Sidebar Cats
    cardStyle: |
      :host {
        width: 95%;
        position: absolute;
        bottom: 0;
        left: 0;
      }
  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 %}
    </li>
  style: |
    :host {
        --sidebar-background: rgba(43,55,78,1);
        --digitalClock-font-size: 10px !important;
        --digitalClock-font-weight: bold !important;
        --border-radius: 25px;
        box-shadow: inset -11px 0px 6px 1px #242e42;
    }
    h1 {
        text-align:center;
    }
    h2 {
        text-align:center;
    }
    .sidebarMenu li {
    }
    .sidebarMenu li.active {
        font-weight: bold;
    }
    .digitalClock {
        padding-top: 10%;
        font-size: 50px !important;
    }
    .date {
        padding-top: 1%;
        font-size: 25px !important;
    }

View Config (with the buttons configured, resulting in them to also be seen in the sidebar)

views:
  - theme: noctis
    title: Home
    icon: mdi:home
    path: home
    badges: []
    cards:
      - square: false
        columns: 1
        type: grid
        cards:
          - show_current: true
            show_forecast: true
            type: weather-forecast
            entity: weather.home_hourly
          - type: horizontal-stack
            cards:
              - show_name: false
                show_icon: false
                type: button
                entity: binary_sensor.bluey
                name: Bluey
                show_state: false
                tap_action:
                  action: none
                theme: Sidebar Cats
              - show_name: false
                show_icon: false
                type: button
                entity: cover.garage_door_msg100_main_channel
                name: Garage
                show_state: false
                tap_action:
                  action: toggle
                theme: Sidebar Garage
              - show_name: false
                show_icon: false
                type: button
                entity: binary_sensor.bandit
                name: Bandit
                show_state: false
                tap_action:
                  action: none
                theme: Sidebar Cats

[pezlin]

Is it still the case that you must use CATT to see the sidebar on Nest hub?