Lovelace: custom sidebar card

The script needs to be adapted still to allow this :wink:

Ok. Thanks, i will wait :slightly_smiling_face:

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 :upside_down_face:

Looking forward to this :star_struck: :star_struck:

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 :slight_smile:

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 :slight_smile:
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:

qqqq

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

Could you please explain how you did use HA on your google hub? Found the option for the google cast but not working correct.

I use catt instead of Home Assistant Cast. I find catt more stable and it also has the ability to cast an entire website, unlike Home Assistant Cast.

Yeah saw that option to. But that is only the install within SSH, not an custom component. Found the readme information a bit summier. Will check that. Thanks.

There is no custom component for catt as far as I know. I use it via SSH.
I use Ubuntu LTS as my host system where catt is installed. In home Assistant I made a command line switch to fire the catt commands outside the docker to the host system.

Can you share the style for your sidebar? I like how you highlight the active page

Well, for the sidebar i haven’t changed the border-radius of the active page.
You can try to add ‘–border-radius: 12px’ (increase for more or decrease for less rounded corners) to your style. I don’t know if the sidebar “listens” to that variable. Maybe @tpx01 knows :wink:

Thanks. I played with style in got it. When you cast to your hub how are you hiding the side bar ? I can hide it on my computer but when I cast to the hub that side bar is there. The built in normal side bar. I use catt as well

how to turn on sidebar
i did like this, but sidebar remaind old, classic
do i need to turn what

Sorry I meant the side bar thats built into HA, not this add on. But I just now realized I can just click on the home hub and goto custom header and disable it through there. thank you though

Did you ever solve this? My links were fine but whenever I change page the sidebar doesnt load. if I refresh it shows up…