Lovelace: custom sidebar card

CregLord · March 26, 2024, 4:10pm

I have been trying to add a bottom card section to my sidepanel and can’t seem to get it to show. It was working for a few days, but I logged in on another device under the same user and now it won’t show anywhere.
edit: I realize in my screenshot there is a random gap on line 18. I removed it and it still does not work.

I was also wondering if I could control multiple devices with one toggle function in the sidebarmenu? For example, have a button that when pressed turns three two light.entities off at once. I am pretty new with HA. Thanks!

dos1973 · March 29, 2024, 8:18pm

Hi,
Short question
is it possible to have day and night colors for the sidebar? Currently i have only fix colors for background and fonts

If yes, would be helpful for a example config
Thanks

Krzychurychu3 · April 3, 2024, 10:10pm

same, bottomcard not showing up.

LiQuid_cOOled · April 4, 2024, 12:57am

Try this…

bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:
        - type:

CaptainBurton · April 9, 2024, 10:52am

Hey guys,

Just wondering if anyone knows how i would go about using google fonts for the clock and other components of the sidebar?

I would like to use the below font if anyone can help, thanks!

Frosty · April 17, 2024, 9:01am

you may have sorted it by now but here’s a guide

Chakka · April 23, 2024, 9:01am

Hi @DBuit , love your work and implemented it for my Panel dashboard.
But whatever I tried, I can’t get the menu items to be highlighted when selected.
This here is my last try but it isn’t working.

  style: |
    :host {
      –sidebar-background: #00FF00;
      –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;
    }
    .sidebarMenu {
     list-style: none;
     margin: 20px 0;
     padding: 20px 0;
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .sidebarMenu li {
     color: var(--sidebar-text-color, #000);
     position: relative;
     padding: 10px 20px;
     border-radius: 12px;
     font-size: 18px;
     line-height: 24px;
     font-weight: 300;
     white-space: normal;
     display: block;
     cursor: pointer;
    }
    .sidebarMenu li ha-icon {
     float: right;
     color: var(--sidebar-icon-color, #000);
    }
    .sidebarMenu li.active {
     background-color: rgba(35, 39, 41, 0.6)!important;
     icon-size: 225px;
    }
    .sidebarMenu li.active ha-icon {
     background-color: rgba(35, 39, 41, 0.6)!important;
     icon-size: 225px;  
    }
    .sidebarMenu li.active::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: var(--sidebar-selected-icon-color, #000);
     opacity: 0.12;
     border-radius: 12px;
    }
    .digitalClock {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 205px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
    .title h1{
        text-align: center;
    }
    .bottomCard {
         background-color: #00FF00;
         icon-size: 225px;
    }

TIA

ValMarDav · April 23, 2024, 1:47pm

Hi, Add these two lines to the option:host


sidebar:
  style: |
    :host {
      --sidebar-selected-text-color: rgb(3, 169, 244);
      --sidebar-selected-icon-color: rgb(3, 169, 244);
    }

Chakka · April 24, 2024, 7:36am

Hi,
added it as you advised but it has no affect. I also played around with the indentation on this :host option and switched themes but without any change.
The selected menu item stays white and unhighlighted.

No idea what could be the issue

LiQuid_cOOled · April 24, 2024, 7:44am

Does this test work for you? Text should be red when selected.

  style: |
    .sidebarMenu li.active {
      color: red !important;
      }

Chakka · April 24, 2024, 8:02am

Hi, tried it and it din’t changed anything.
Could you please review that code part I am using, probably something is missing in there.

sidebar:
  digitalClock: true
  date: true
  dateFormat: dddd DD. MMMM
  clock: false
  style: |
    :host {
    --sidebar-background: var(--primary-background-color);
    --sidebar-text-color: var(--primary-text-color);
    --face-color: #FFF;
    --face-border-color: #FFF;
    --clock-hands-color: #000;
    --clock-seconds-hand-color: #FF4B3E;
    --clock-middle-background: #FFF;
    --clock-middle-border: #000;
    --sidebar-selected-text-color: rgb(3, 169, 244);
    --sidebar-selected-icon-color: rgb(3, 169, 244);
    }
    .sidebarMenu li {
        line-height: 35px!important;
        color: var(--primary-text-color)!important;
     }
    .sidebarMenu li ha-icon {
        color: white!important;
     }
    .sidebarMenu li.active {
        color: red !important;
        font-weight: bold!important;
     }
    .sidebarMenu li.active ha-icon {
        color: white!important;
     }
    .digitalClock {
       text-align: center;
       padding-bottom: 1px;
       padding-top: 20px
       font-size: 205px;
       line-height: 95px;
    }
    .date {
       text-align: center;
    }
    .title h1{
       text-align: center;
    }
    .bottomCard {
       background-color: #00FF00;
       icon-size: 225px;
    }
  width:
    mobile: 0
    tablet: 25
    desktop: 25

Thanks

LiQuid_cOOled · April 24, 2024, 8:08am

Test this and see what you get

sidebar:
  active: true
  width:
    mobile: 0
    tablet: 25
    desktop: 11
  breakpoints:
    mobile: 768
    tablet: 768
    desktop: 1024
  style: |
    :host {
        --sidebar-background: transparent;
        --sidebar-text-color: dodgerblue;
        --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: dodgerblue;
    }

    .sidebarMenu li.active {
     background-color: rgba(0, 0, 0, 0)!important;
     icon-size: 255px;
     }
    .digitalClock {
        font-weight: 400!important;
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        font-size: 100px;
        line-height: 95px;
    }
    .date {
        text-align: center;
    }
    .title h1{
        text-align: center;
    }
    .bottomCard {
     icon-size: 185px;
    }
  digitalClock: true
  twelveHourVersion: true
  hideHassSidebar: false
  hideTopMenu: false
  date: true
  dateFormat: dddd DD MMM
  clock: false
  sidebarMenu:
    - action: navigate
      navigation_path: /lovelace-home/0
      name: Home
      active: true
      icon: mdi:home-account
    - action: navigate
      navigation_path: /lovelace/lights
      name: Lights
      active: true
      icon: mdi:lightbulb-on-10
    - action: navigate
      navigation_path: /lovelace/media
      name: Media
      active: true
      icon: mdi:television
  bottomCard:
    type: grid
    cardOptions:
      columns: 1
      square: false
      cards:

Should look similar to this

Chakka · April 24, 2024, 8:35am

This actually works and I get your nice blueish layout, but the menu items are still not highlighted.

LiQuid_cOOled · April 24, 2024, 8:39am

Adjust the following line to this and see if you get red when you click on one.

.sidebarMenu li.active {
       background-color: rgba(255, 0, 0, 1)!important;

Chakka · April 24, 2024, 8:56am

Hi, unfortunately no change. I also added that second part for ha-icon but it has no impact.

    .sidebarMenu li.active {
     background-color: rgba(255, 0, 0, 1)!important;
     icon-size: 255px;
    }
    .sidebarMenu li.active ha-icon {
     background-color: rgba(255, 0, 0, 1)!important;
    }

ValMarDav · April 24, 2024, 11:27am

Make sure you have indicated a path as a reference.

Chakka · April 24, 2024, 12:07pm

@ValMarDav, you are my man.

I changed all my paths from this:
navigation_path: home
navigation_path: lights
To this:
navigation_path: /dashboard-home/home
navigation_path: /dashboard-home/lights

And now the menu items are getting higlhlighted. Brilliant.

Very weird and I don’t get it, I mean browsing worked without the /dashboard-home/ part, but the css styling don’t.

Thanks a lot man.

Faecon · May 3, 2024, 12:25pm

resources:
  url: /hacsfiles/sidebar-card/sidebar-card.js
  type: module


views:
  - !include views/home.yaml
  - !include views/Praktijkruimte1.yaml
  - !include views/Praktijkruimte3.yaml
  - !include views/Praktijkruimte4.yaml
  - !include views/Praktijkruimte5.yaml
  - !include views/Dokterskabinet.yaml
  - !include views/Inspanningslab.yaml

sidebar:
  clock: true
  hideTopMenu: true
  showTopMenuOnMobile: true
  digitalClock: true
  sidebarMenu:
    - action: navigate
      name: Home
      navigation_path: /lovelace/default_view
    - action: navigate
      name: Praktijkruimte 1
      navigation_path: /lovelace/Praktijkruimte1
    - action: navigate
      name: Praktijkruimte 2
      navigation_path: /lovelace/Praktijkruimte2
    - action: navigate
      name: Praktijkruimte 3
      navigation_path: /lovelace/Praktijkruimte3
    - action: navigate
      name: Praktijkruimte 4
      navigation_path: /lovelace/Praktijkruimte4
    - action: navigate
      name: Praktijkruimte 5
      navigation_path: /lovelace/Praktijkruimte5
    - action: navigate
      name: Dokterskabinet
      navigation_path: /lovelace/dokterskabinet
    - action: navigate
      name: Inspanningslab
      navigation_path: /lovelace/inspanningslab
  title: Praktijk 
  width:
    desktop: 20
    mobile: 0
    tablet: 25

this is what my ui-lovelace.yaml looks like. But I don’t get a sidebar. what am I doing wrong ?

ValMarDav · May 3, 2024, 1:05pm

Hi,

You need to add the Sidebar before the views: parameter.

Faecon · May 6, 2024, 6:49pm

On my desktop I can see the sidebar, on my tablet i can’t. What could be the problem ?