Lovelace: custom sidebar card

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

Thanks @DBuit looking forward to it

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 …

exe

Thanks

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