Lovelace: custom sidebar card

I have custom header zo that is not the problem.
Can you check the browsers developer console for the messages?

Hello again @DBuit! For me it work like a charm on desktop and tablet, but on the IPhone I think something is not good!
Take a look at this picture and Maybe You can give me an ideea.

the code I use:

sidebar:
 title: familia Duță
 style: |
    :host {
        --sidebar-background: #081116 ;
        --sidebar-text-color: #fff;
        --face-color: #21353E;
        --face-border-color: #21353E;
        --clock-hands-color: #fff;
        --clock-seconds-hand-color: #fff;
        --clock-middle-background: #21353E;
        --clock-middle-border: #21353E;
    }
    .sidebarMenu li.active {
     background-color: #6A808D!important;
     }
    .digitalClock {

        padding-left: 18px;
        padding-bottom: 70px;
        padding-top: 10px
    }
    .digitalClock {
        font-size: 65px;
        line-height: 65px;
    }
 template: |
    <li>
      {% if now().hour  < 5 %} Buna seara {{'\U0001F634'}}
      {% elif now().hour < 12 %} Buna dimineata {{'\u2615\uFE0F'}}
      {% elif now().hour < 18 %} Buna ziua {{'\U0001F44B\U0001F3FB'}}
      {% else %} Buna seara {{'\U0001F44B\U0001F3FB'}}{% endif %}
    </li>

 width:
    mobile: 0
    tablet: 25
    desktop: 25
 breakpoints:
    mobile: 768
    tablet: 1024
 clock: false
 hideTopMenu: true
 showTopMenuOnMobile: false
 digitalClock: true
 digitalClockWithSeconds: false
 sidebarMenu:
    - action: navigate
      navigation_path: "/lovelace/0"
      name: "Acasa"
      icon: mdi:home
      active: true
    - action: navigate
      navigation_path: "/lovelace/1"
      name: "Veranda"
      icon: mdi:television-clean
    - action: navigate
      navigation_path: "/lovelace/2"
      name: "Living room"
      icon: mdi:sofa
    - action: navigate
      navigation_path: "/lovelace/dormitor"
      name: "Dormitor"
      icon: mdi:hotel
    - action: navigate
      navigation_path: "/lovelace/4"
      name: "Baie"
      icon: mdi:shower
    - action: navigate
      navigation_path: "/lovelace/5"
      name: "Centrala"
      icon: mdi:coolant-temperature
    - action: navigate
      navigation_path: "/lovelace/6"
      name: "Device-uri"
      icon: mdi:lan
    - action: navigate
      navigation_path: "/lovelace/7"
      name: "Pagina test"
      icon: mdi:format-list-bulleted-square

Hi @odiv,

What are you showing i see a weird tile? But you shared your sidebar config?
I think i need to see the view yaml of the tile

It is showing the sidebar in background, white text and the icons.
I use Google Light theme! With other template it is okay

Aaaah i see now, have to test this and see how to fix

@DBuit Do you think it is possible to strech the wallpaper behind the sidebar as illustrated in this image?

I saw that the sidebar is actually not within the same view looking at the CSS. Do you have any ideas on how we could elegantly find a solution for this? The only solution with current setup that I see is to cut my wallpaper at 25%/75% and apply a css background image for the sidebar and the other one for the view. :sweat_smile:

My main idea is to make something like matthias has done (but then not using a picture element but have a fully responsive UI): A different take on designing a Lovelace UI

As you can see his sidebar is opaque… :smile:

1 Like
custom_header:
  hide_header: true

resources:
  - url: /local/sidebar-card.js
    type: module   
  - type: module
    url: /local/custom-header.js
    

sidebar:
  digitalClock: true
  sidebarMenu:
    - action: navigate
      navigation_path: "/lovelace/home"
      name: "Home"
      active: true
      hold_action:
        action: none
      style:
        border-radius: 5vw
        left: 11.7%
        top: 26%
        width: 20.5078125%

    - action: navigate
      navigation_path: "/lovelace/lights"
      name: "Lights"
      active: true
    - action: navigate
      navigation_path: "/lovelace/music"
      name: "Music"
      active: true
    - action: navigate
      navigation_path: "/lovelace/media"
      name: "Media"
      active: true

  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 %} 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:
  - view:

Kind of new to yaml…, but how do i associate a “page” with the side bar?

Hi @DBuit
Some suggestions / a wishlist:
Is there any news on getting non-light entities (e.g. lock) to show the correct status color in the sidebar?
Would it also be possible to use the default system icons (or customize.yaml icons) for entities to reflect their current state as well as colour?
What would also be great is if sidebar items could have a transparent background when they are active (like non-active items)

Thanks!!

@DBuit

Yeah newest update doesn’t seem to fix it still. Here is the error it gives in browser console.

If I get rid of hideTopMenu I do get the “Header not found!” Message.

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: