Lovelace: custom sidebar card

Share your Projects! Dashboards & Frontend
589

Hi all! I have a minor issue. I set hideTopMenu to true in my main config. Now the top Menu is gone which is good. How can I get it back for example editing the Dashboards? Saw now that i can´t click the 3 dots anymore? Damn it or I have to go back and restore from a backup? And the same would apply for the sideMenu? Any Hack or Button I can add to get everything back? Thanks a lot!

P.s. how can i make it that my Huawei tablet runs in tablet mode and the phones to run for phones? Currently phone and tablet share the same size if the sidebar which is bad :frowning:

590

Hi all
We are some people who have problems with the bottom width.
Here is my example. I just want to have the weather card at the bottom of the side bar.
But as you see, there is a width problem.

image
image383×877 27.4 KB

I tried differents things, without result.

Here is my actually code :

 bottomCard:
    type: horizontal-stack
    cardOptions:
      cards:
        - show_current: true
          show_forecast: true
          type: weather-forecast
          cardStyle: |
            :host {
              width: 100%;
              position: absolute;
              bottom: 0;
              left: 0;
                }
             ha-card {
               background: transparent;
               color: #FFF;
               overflow: hidden !important;
               box-shadow: none !important;
               width: 100%;
             }
          entity: weather.maison_veauche
          theme: Animated Weather Card
          secondary_info_attribute: pressure
          tap_action:
            action: navigate
            navigation_path: /lovelace/Météo

Need som help please?

591

Did you ever get this two work? I’m also strugling to highlight the active tab…

592

This might help, this is my style config and the menu items highlight

style: |
    ha-icon {
        --mdc-icon-size: 36px;
    }
    .sidebarMenu li {
        color: var(--sidebar-text-color, #000);
        position: relative;
        padding: 10px 20px;
        border-radius: 12px;
        font-size: 32px !important;
        line-height: 32px !important;
        font-weight: 300;
        white-space: normal;
        display: block;
        cursor: pointer;
    }
    h1.digitalClock {
        font-size: 100px !important;
        line-height: 80px !important;
        font-weight: 300 !important;
        cursor: default;
    }
    h2 {
        margin: 0;
        font-size: 36px !important;
        line-height: 32px !important;
        font-weight: 200;
        color: var(--sidebar-text-color, #000);
        cursor: default;
    }

image

593

Thanks for a quick reply and sharing the code!
I figured it out while applying your style, I had the path for each page done as
path: first

While it was suppose to be,
path: /lovelace-menuitem/first/

The links worked correctly but style did not recognize the paths.

1 Like
594

Hello, I am new to home assistant.
I would like to know how many lights are open
on my sidebar
can you help me

595

do you mean how many lights are on and you want to present it in your sidebar

596

Thanks for a very nice card - I see it mentioned above but is there any way to actually use this with casting the lovelace view (not CATT)? I can’t get it to show in my view, only the other cards in the dashboard. Anybody found a solution?

597

Can someone please assist me. I have been trying for days to get this card working for myself but nothing i do seems to work. I have googled for hours and still cannot find a solution. I basically cannot even get the sidebar up on the screen. I have followed instructions and added the repo url as a custom repo, added the resource url under dashboard → resources. I am adding the sidebar code under the raw config editor for a new dashboard i created but i cannot get the sidebar to even appear on the screen. Can someone please tell me what am i doing wrong

598

I use HACS to install to avoid anything going wrong with manual install. But assuming you’ve got it installed correctly, post us your dashboard yaml so we can see if there’s any issues there.

599

Hey,

Can anyone help me please? I am really struggling to remove the box around ‘Good Evening’ in the bottombar.

I have tried changing the CSS and card type etc but nothing will remove.

Thank you.Screenshot 2022-12-20 at 22.05.52

600

Nice man & can you share code pleas ?

601

Has anyone gotten a transparent background on this sidebar to work? I am able to change the color easily or even upload an image as a background, but I just can’t seem to get it transparent!

602

@amandayahh, I probably spent 40+ hours on this same issue. What I discovered using the browser console is that the sidebar seems to be its own container and not a ‘card’ on the dashboard. The transparent setting seems to be working but because there is nothing behind it (ie, dashboard background image), all you see is white. I ended up just finding a nice wood texture for the sidebar and I’m happy with the results.

image
image898×632 50.7 KB

2 Likes
603

Hi,
I couldn’t make it work for different devices, so I moved on from it. the below is what I found of the ‘sidebar’ code. I hope it works:

00 sidebar 
#############################################################################
#        SIDEBAR code                                                       #
#         Not used via include                                              #
#         Check dashboard raw code page                                     #
#############################################################################

sidebar:
  width:
    mobile: 0
    tablet: 30
    desktop: 20
  breakpoints:
    mobile: 768
    tablet: 1024
  digitalClock: true
  date: true
  dateFormat: ddd, DD MMM
  clock: false
  hideOnPath:
    - /lovelace-testing/bedroom2
  hideHassSidebar: false
  hideTopMenu: false
  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 li.active {
     background-color: rgba(0, 0, 0, 0)!important;
     icon-size: 225px;
     }
    .digitalClock {
        text-align: center;
        padding-bottom: 1px;
        padding-top: 20px
        margin-bottom: 2px;
        font: revert;
        font-size: 50x;
        font-weight: 400;
        line-height: 50px;
        color: orange;
    }
    .date {
        text-align: center;
        padding-bottom: 0px;
        padding-top: 0px;
        margin-top: 1px;
        font-weight: 300;
        color: orange;
    }
    .title h1{
        text-align: center;
    }
    .bottomCard {
     background-color: #00FF00;
     icon-size: 225px;
     width: 100%;
     }


#############################################################################
#        SIDEBAR MENU                                                       #
#                                                                           #
#                                                                           #
#############################################################################
  sidebarMenu:
    !include 02_sidebar_sidebarMenu.yaml


#############################################################################
#        BOTTOM CARD                                                        #
#                                                                           #
#                                                                           #
#############################################################################
  bottomCard:
    type: custom:stack-in-card
    cardStyle: |
      :host {
        width: 100%;
       }
       ha-card {
         border-radius: 0px;
         overflow: hidden !important;
         box-shadow: none !important;
         margin-top: 0px;
         margin-bottom: 0px;
       }
    cardOptions:
      mode: vertical
      keep:
        background: false
        box_shadow: false
        margin: false
        outer_padding: false
        border_radius: false
      cards:
        !include 031_bottomCard_cards.yaml```
01 sidebar_mainOptions 
#     sidebar mainOptions

width:
  mobile: 0
  tablet: 25
  desktop: 20
breakpoints:
  mobile: 768
  tablet: 1024

digitalClock: true
date: true
dateFormat: DD-MMM-YYYY
clock: false
hideOnPath:
  - /lovelace-testing/bedroom2
hideHassSidebar: true
hideTopMenu: false

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>

  {% if "Vandaag" in states('sensor.blink_gft') %} <li>Vandaag groenebak aan
  de straat</li> {% endif %}

  {% if "Vandaag" in states('sensor.blink_papier') %} <li>Vandaag oudpapier
  aan de straat</li> {% endif %}

  {% if "Vandaag" in states('sensor.blink_pmd') %} <li>Vandaag plastic aan de
  straat</li> {% endif %}

  {% if "Vandaag" in states('sensor.blink_restafval') %} <li>Vandaag grijzebak
  aan de straat</li> {% endif %}

  {% if "Morgen" in states('sensor.blink_gft') %} <li>Morgen groenebak aan de
  straat</li> {% endif %}

  {% if "Morgen" in states('sensor.blink_papier') %} <li>Morgen oudpapier aan
  de straat</li> {% endif %}

  {% if "Morgen" in states('sensor.blink_pmd') %} <li>Morgen plastic aan de
  straat</li> {% endif %}

  {% if "Morgen" in states('sensor.blink_restafval') %} <li>Morgen grijzebak
  aan de straat</li> {% endif %}

  {% if states('sensor.current_lights_on') | float > 0 %}
  <li>{{states('sensor.current_lights_on')}} lampen aan</li> {% endif %}

  {% if states('sensor.current_media_players_on') | float > 0 %}
  <li>{{states('sensor.current_media_players_on')}} speakers aan</li> {% endif
  %}```
02 sidebar_sidebarMenu 
- action: navigate
  navigation_path: /lovelace/home
  name: Home
  active: true
- action: navigate
  navigation_path: /lovelace/lampen
  name: Lampen
03 sidebar_bottomCard 
#    bottomCard:
type: horizontal-stack
cardOptions:
  cards:
    !include 031_bottomCard_cards.yaml
04 sidebar_bottomCard_cards 
- type: custom:weather-card
  number_of_forecasts: '3'
  hourly_forecast: false
  details: false
  entity: weather.home
  forecast: false
  current: true
- type: custom:mushroom-chips-card
  chips:
    - type: action
      icon_color: blue
      tap_action:
        action: navigate
        navigation_path: home
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon: mdi:home
    - type: back
    - type: menu
    - type: action
      tap_action:
        action: navigate
        navigation_path: home
      icon: mdi:dots-vertical
      icon_color: blue
    - type: conditional
      conditions:
        - entity: switch.irrigation_pump_garden
          state: 'on'
      chip:
        type: template
        entity: switch.irrigation_pump_garden
        icon: mdi:sprinkler
        icon_color: light-blue
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        card_mod:
          style: |
            .content { 
              animation: sprinkle 2s linear infinite;
              transform-origin: 29% 88%;
            }
            @keyframes sprinkle {
              0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
              1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
              6%, 21%, 36%, 51% { transform: rotate(2deg); }
            }
    - type: conditional
      conditions:
        - entity: switch.pool_tank_valve
          state: 'on'
      chip:
        type: template
        entity: switch.pool_tank_valve
        content_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        picture: /local/my-icons/smart-water-tap-color.png
    - type: conditional
      conditions:
        - entity: switch.pool_filter_pump
          state: 'on'
      chip:
        type: template
        entity: switch.pool_filter_pump
        content_info: none
        tap_action:
          action: toggle
        hold_action:
          action: none
        double_tap_action:
          action: none
        picture: /local/my-icons/pool filter-96.png
- type: custom:button-card
- type: grid
  square: false
  columns: 4
  cards:
    - type: custom:mushroom-template-card
      icon: mdi:home-floor-b
      layout: vertical
      tap_action:
        action: navigate
        navigation_path: b1
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon_color: green
    - type: custom:mushroom-template-card
      icon: mdi:home-floor-g
      layout: vertical
      tap_action:
        action: navigate
        navigation_path: gf
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon_color: '#ffdead'
    - type: custom:mushroom-template-card
      icon: mdi:home-floor-1
      layout: vertical
      tap_action:
        action: navigate
        navigation_path: ff
      hold_action:
        action: none
      double_tap_action:
        action: none
      icon_color: '#CD5C5C'
    - type: custom:mushroom-template-card
      icon: mdi:home-floor-2
      layout: vertical
      icon_color: '#4682B4'
      tap_action:
        action: navigate
        navigation_path: rf
      hold_action:
        action: none
      double_tap_action:
        action: none
- type: custom:button-card
- square: false
  columns: 1
  type: grid
  cards:
    - square: false
      columns: 4
      type: grid
      cards:
        - type: custom:mushroom-template-card
          icon: mdi:palm-tree
          layout: vertical
          tap_action:
            action: navigate
            navigation_path: outdoor
          hold_action:
            action: none
          double_tap_action:
            action: none
          icon_color: '#aeff00'
          primary: ''
        - type: custom:mushroom-template-card
          icon: mdi:chart-bar
          layout: vertical
          tap_action:
            action: navigate
            navigation_path: info
          hold_action:
            action: none
          double_tap_action:
            action: none
          icon_color: '#593387'
        - type: custom:mushroom-template-card
          icon: mdi:home-assistant
          icon_color: blue
          layout: vertical
          tap_action:
            action: navigate
            navigation_path: ha
          hold_action:
            action: none
          double_tap_action:
            action: none
          card_mod:
            style:
              mushroom-shape-icon$: |
                ha-icon {
                  --icon-animation: boing 3s ease infinite;
                  transform-origin: 50% 90%;
                }
                @keyframes boing {
                  0% { transform: scale3d(1, 1, 1); }
                  7% { transform: scale3d(1.25, 0.75, 1); }
                  10% { transform: scale3d(0.75, 1.25, 1); }
                  12% { transform: scale3d(1.15, 0.85, 1); }
                  16% { transform: scale3d(0.95, 1.05, 1); }
                  19% { transform: scale3d(1.05, 0.95, 1); }
                  25% { transform: scale3d(1, 1, 1); }
                }
    - square: false
      columns: 4
      type: grid
      cards:
        - type: custom:mushroom-template-card
          primary: ''
          icon: mdi:fire
          icon_color: red
          layout: vertical
          card_mod:
            style:
              mushroom-shape-icon$: |
                ha-icon {
                  --icon-animation: fire 1.5s infinite;
                  transform-origin: 50% 85%;
                }
                @keyframes fire {
                    0% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    5% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    10% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    15% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    20% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    25% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    30% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    35% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    40% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    45% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    50% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    55% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    60% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    65% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    70% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    75% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    80% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    85% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    90% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                    95% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-red)); opacity: {{range(7, 10) | random / 10}}; }
                    100% { transform: rotate({{range(-20, 20) | random / 10}}deg) scaleY({{range(9, 12) | random / 10}}); color: rgb(var(--rgb-deep-orange)); opacity: {{range(7, 10) | random / 10}}; }
                }
- type: custom:button-card
- type: grid
  square: true
  columns: 4
  cards:
    - type: custom:mushroom-template-card
      icon: none
      primary: ''
      icon_color: ''
      layout: vertical
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              --shape-animation: fade 25s linear infinite reverse;
              --shape-color: none;
            }
            @keyframes fade {
              6.24%, 12.49%, 18.74%, 24.99%, 31.24%, 37.49%, 43.74%, 49.99%, 56.24%, 62.49%, 68.74%, 74.99%, 81.24%, 87.49%, 93.74%, 100%  { box-shadow: 0 0 20px 20px transparent inset; }
              0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7) inset; }
              6.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-deep-orange), 0.7) inset; }
              12.5% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7) inset; }
              18.75% { box-shadow: 0 0 0 0 rgba(var(--rgb-amber), 0.7) inset; }
              25% { box-shadow: 0 0 0 0 rgba(var(--rgb-yellow), 0.7) inset; }
              31.25% { box-shadow: 0 0 0 0 rgba(var(--rgb-lime), 0.7) inset; }
              37.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-green), 0.7) inset; }
              43.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-green), 0.7) inset; }
              50% { box-shadow: 0 0 0 0 rgb(var(--rgb-teal), 0.7) inset; }
              56.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-cyan), 0.7) inset; }
              62.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-light-blue), 0.7) inset; }
              68.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-blue), 0.7) inset; }
              75% { box-shadow: 0 0 0 0 rgb(var(--rgb-indigo), 0.7) inset; }
              81.25% { box-shadow: 0 0 0 0 rgb(var(--rgb-deep-purple), 0.7) inset; }
              87.5% { box-shadow: 0 0 0 0 rgb(var(--rgb-purple), 0.7) inset; }
              93.75% { box-shadow: 0 0 0 0 rgb(var(--rgb-pink), 0.7) inset; }
            }
1 Like
604

Hello all,

I am pretty new to this all.
So sorry if this is a real basic question.

Do you guys make all seperate dashboards with the sidebar yamlcode on top. Or is there a way to make a sidebar template which can be implemented in any dashboard.

thanks!

605

Did the Decluttering card make it possible to reuse the “sidebar” on multiple pages?

606

Hi all, can the sidebar be made scrollable? Having issues on multiple devices… how did you al solve this? On tablet it works, in the car it is cut of… Thank a lot in advance!

607

Wow your sidebar looks great!!! How did you manage to get a background image on the sidebar? Could you please share the code?

608

Sure @georgefokianos, happy to. See below:

Sidebar Code 
sidebar:
  title: The Wood Clan
  digitalClock: true
  date: true
  dateFormat: dddd, MMMM Do
  width:
    mobile: 0
    tablet: 25
    desktop: 18
  sidebarMenu:
    - action: navigate
      navigation_path: /the-wood-clan/overview
      name: Overview
      icon: mdi:compass
    - action: navigate
      navigation_path: /eagles-nest/home
      name: Eagles Nest
      icon: mdi:language-swift
    - action: navigate
      navigation_path: /elk-tracker-lodge/home
      name: Elk Tracker Lodge
      icon: mdi:greenhouse
  style: |
    :host {
      --sidebar-background: #000;
      --sidebar-text-color: #fff;
      --sidebar-icon-color: #fff;
      --sidebar-selected-text-color: #fff;
      --sidebar-selected-icon-color: #fff;
      background: center/cover no-repeat fixed url('/local/images/background/bg_sidebar_grey_wood.jpg');
      box-shadow: inset -38px -3px 11px -28px #000;
    }
    #customSidebar {
       z-index: 9999!important;
     }
    .sidebarMenu {
      border-top: 3px solid rgba(255, 255, 255, 0.2)!important;
      border-bottom: 3px solid rgba(255, 255, 255, 0.2)!important;
    }
    .sidebarMenu li {
      line-height: 20px!important;
      font-size: 16px!important;
    }
    .sidebarMenu li.active {
      font-weight: bold!important;
    }
    .sidebarMenu li.active::before {
      border-radius: 30px!important;
    }
    h1 {
      text-align: center!important;
    }
    h1.digitalClock {
      font-weight: normal!important;
    }
    h2 {
      font-size: 20px!important;
      text-align: center!important;
    }

Here is the image I used for the sidebar background:

bg_sidebar_grey_wood
bg_sidebar_grey_wood1920×2880 436 KB

1 Like