Configuration file for custom-sidebar

pre-2025.5-sidebar-config.yaml

##########################################################################################
# Global settings Custom sidebar https://github.com/elchininet/custom-sidebar
# version https://github.com/elchininet/custom-sidebar/releases/tag/v7.0.0
# @mariusthvdb 25-11-24
# https://community.home-assistant.io/u/mariusthvdb/summary
#
# still in card_mod theme: conditional animations and the notification badge on collapsed menu icon
##########################################################################################

# keep colors even when selected (and not change to the default HA styling in that case)
icon_color_selected: var(--custom-sidebar-icon-color)
text_color_selected: var(--custom-sidebar-text-color)
info_color_selected: var(--custom-sidebar-info-color)
selection_background: var(--sidebar-selected-icon-color) # to not colorize the full background
# selection_opacity: 0.5
item_background_hover: var(--hover-color) #new in v7.0.0 replace card_mod a:hover paper-icon-item

##########################################################################################
# add styling to the plugin settings, and center the badges
##########################################################################################

styles: |
  @keyframes marquee {
    from {transform: translateX(0%);}
    to {transform: translateX(35%);}
  }

  @keyframes blink {
    50% {opacity: 0.2;}
  }

  @keyframes blinkhard {
    0%,49% {opacity:0;}
    50%,100% {opacity:1;}
  }

  @keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
  }

  :host paper-icon-item > .notification-badge:not(.notification-badge-collapsed) {
    font-size: 13px;
    left: calc(var(--app-drawer-width,248px) - 32px);
    transform: translateX(-50%);
    border-radius: 24px;
    padding: 0px 4px;
  }

  :host paper-icon-item > .notification-badge-collapsed {
    font-size: 0.65em;
    left: 26px;
    transform: translateX(-25%);
    border-radius: 24px;
    padding: 0px 2px;
    bottom: 14px;
    min-width: 20px;
    max-width: 100px;
  }

  :host a[data-panel='ui-data'] paper-icon-item > .notification-badge-collapsed {
    transform: translateX(-40%);
  }

  .menu .title:after {
    font-weight: bold;
    animation: marquee 4s alternate infinite;
  }

#   a:hover paper-icon-item {
#     background: var(--hover-color);
#   }

# Only fixed aniations!
# When dynamic, based on conditions, requires card_mod theme
#   :host a[data-panel='ui-data'] paper-icon-item ha-icon {
#     animation: spin 3s infinite linear;
#   }

#   :host a[data-panel='ui-overzicht'] paper-icon-item {
#       --sidebar-text-color: blue;
#       background: lightblue;
#       animation: blink 2.5s ease infinite;
#   }
#   @keyframes blink {
#     50% {opacity: 0.2;}
#   }
##########################################################################################
# Global variables
##########################################################################################

js_variables:
# title
  date_time: sensor.date_time_iso

# subtitle
  marquee: sensor.marquee_alerts

# overzicht
  alerts: sensor.alerts_notifying
  christmas: input_select.theme
  meteo: binary_sensor.meteoalarm_brabant
  temp: sensor.ws_5500_outdoor_temperature
  vandaag: sensor.vandaag
  weather: sensor.weer_alarm_kleur
  werkdag: binary_sensor.werkdag

# data
  danger: binary_sensor.rook_co_lekkage
  leakage: binary_sensor.watermeter_leak_detected
  trash: sensor.afvalwijzer_vandaag
  trash_color: sensor.afval_kleur

# familie
  family: sensor.familie_samenvatting
  party: binary_sensor.feest_alerts
  pres_col: sensor.presence_color
  pres_ico: sensor.presence_icon
  remote: binary_sensor.remote_ui
  verjaardag: sensor.volgende_feest_kort

# instellingen
  check: binary_sensor.wekker_voor_morgen
  fan: input_boolean.ventilate
  next: sensor.next_alarm
  pond: switch.vijverpompen

# systeem
  core: update.home_assistant_core_update
  mem_use: sensor.memory_use_percent
  safe: binary_sensor.huis_ramen_deuren_puien_veilig

# cameras
  motion: binary_sensor.camera_beweging_buiten
  poe: switch.poe_inside_cameras

# energy
  netto: sensor.netto_verbruik

# test
  dag_deel: sensor.dag_deel

##########################################################################################
# Partials derived from the global variables
##########################################################################################

partials:
  functies: |
    const capitalize = str => str[0].toUpperCase() + str.slice(1);

  titleClick: |
    window.titleClick = () => {
      const path = '/ui-overzicht/welkom';
      window.history.replaceState(null, '', path);
      window.dispatchEvent(
        new CustomEvent(
          'location-changed',
          {
            detail: {
              replace: path
            }
          }
        )
      );
    };

  title: |
    const tijd = states(date_time);
    const tijdStr = new Date( tijd )
      .toLocaleTimeString([], {hour:"numeric",minute:"2-digit"});

  subtitle: |
    const marquees = states(marquee);
    const phrase = marquees == 1 ? 'Alert: ' : 'Alerts: ';

  overzicht: |
    const buiten = states(temp);
    const datum = states(vandaag);
    const kerst = is_state(christmas,'Kerst');
    const meteoalarm = is_state(meteo,'on');
    const vrij = is_state(werkdag,'off');
    const waarschuwing = states(alerts) > 0;
    const weeralarm = states(weather);

  data: |
    @partial functies
    const afval = capitalize(states(trash));
    const afval_kleur = states(trash_color);
    const gevaar = is_state(danger,'on');
    const lek = is_state(leakage,'on');

  familie: |
    const aanwezig_ico = states(pres_ico);
    const aanwezig_kleur = states(pres_col);
    const cloud = is_state(remote,'on');
    const fam = states(family);
    const feest = is_state(party,'on');
    const verj = states(verjaardag);

  instellingen: |
    const vent = is_state(fan,'on');
    const vijver = is_state(pond,'on');
    const wakker = states(next);
    const wekker = is_state(check,'on');

  systeem: |
    const geheugen = states(mem_use);
    const gereed = is_state(safe,'on');
    const update = is_state(core,'on');

  cameras: |
    const actief = is_state(poe,'on');
    const beweging = is_state(motion,'on');

  energy: |
    const nettov = states(netto) < 0;

  test: |
    var kleuren = {'Ochtend':'var(--info-color)',
                   'Middag':'var(--success-color)',
                   'Avond':'var(--warning-color)'};
    const deel = states(dag_deel);

##########################################################################################
# Menu settings
##########################################################################################

menu_background: >
  [[[ @partial familie
      return feest ? 'top / cover url(/local/images/balloons.png)' : 'none'; ]]]
title: |
  [[[
    @partial titleClick @partial title
    return `<span style="cursor:pointer"
             onClick="javascript:titleClick()">
             Rumah kami: ${tijdStr}
            </span>`;
  ]]]
 
title_color: >
   [[[ states('sensor.presence_color'); ]]]
subtitle: >
  [[[ @partial subtitle
      return marquees != 0 ? phrase + marquees : ''; ]]]
subtitle_color: var(--alert-color)

##########################################################################################
# Sidebar settings
##########################################################################################

sidebar_editable: >
  [[[ is_state('input_boolean.sidebar_editable','on'); ]]]
sidebar_button_color: >
  [[[ @partial overzicht
     return waarschuwing ? 'var(--alert-color)' : 'var(--success-color)'; ]]]
sidebar_border_color: var(--primary-color)
sidebar_background: >
  [[[ @partial overzicht
      return meteoalarm ? weeralarm
      : kerst ? 'url(/local/season/kerst_smurfen.png)'
      : 'var(--sidebar-background-color)'; ]]]
# scrollbar_thumb_color: red #set in ha themes with scrollbar-thumb-color: var(--primary-color)

order:

##########################################################################################
# Dashboards
##########################################################################################

  - item: ui-overzicht
    match: data-panel
    order: 1
    icon: >
      [[[ @partial overzicht
          return waarschuwing ? 'mdi:home-alert' : 'cli:home-check'; ]]]
    icon_color: >
      [[[ @partial overzicht
          return waarschuwing ? 'var(--alert-color)' : 'var(--success-color)'; ]]]
    notification: >
      [[[ states(temp); ]]]
    notification_color: >
      [[[ states('sensor.temperature_color_name'); ]]]
    notification_text_color: >
      [[[ @partial overzicht
         return (buiten > 5 && buiten < 15) ? 'dimgray' : 'ivory'; ]]]
    info: >
      [[[ @partial overzicht
          return datum; ]]]
    info_color: >
      [[[ @partial overzicht
          return vrij ? 'var(--success-color)' : 'var(--warning-color)'; ]]]

##########################################################################################

  - item: ui-data
    match: data-panel
    order: 2
    icon: >
      [[[ @partial data
          return lek ? 'mdi:pipe-leak' : 'mdi:home-analytics'; ]]]
    icon_color: >
      [[[ @partial data
          return gevaar ? 'var(--alert-color)' : 'var(--success-color)'; ]]]
    notification: >
      [[[ @partial data
          return gevaar ? 'Gevaar' : 'Veilig'; ]]]
    notification_color: >
      [[[ @partial data
          return gevaar ? 'var(--alert-color)' : 'var(--success-color)'; ]]]
    notification_text_color: ivory
    text_color: >
      [[[ @partial data
          return lek ? 'blue' : 'var(--custom-sidebar-text-color)'; ]]]
    info: >
      [[[ @partial data
          return afval == 'geen' ? '' : afval ; ]]]
    info_color: >
      [[[ @partial data
          return afval_kleur; ]]]
    item_background: >
      [[[ @partial data
          return lek ? 'lightblue' : ''; ]]]

##########################################################################################

  - item: ui-familie
    match: data-panel
    order: 3
    icon: >
      [[[ @partial familie
          return feest ? 'mdi:party-popper' : aanwezig_ico; ]]]
    icon_color: >
      [[[ @partial familie
          return feest ? 'orange' : aanwezig_kleur; ]]]
    notification: >
      [[[ @partial familie
          return fam; ]]]
    notification_color: >
      [[[ @partial familie
          return aanwezig_kleur; ]]]
    notification_text_color: >
      [[[ @partial familie
          return aanwezig_kleur == 'gold' ? 'saddlebrown' : 'ivory'; ]]]
    info: >
      [[[ @partial familie
         return verj; ]]]
    info_color: >
      [[[ @partial familie
         return feest ? 'var(--warning-color)' : 'var(--info-color)'; ]]]

##########################################################################################

  - item: ui-instellingen
    match: data-panel
    order: 4
    icon_color: >
      [[[ @partial instellingen
          return vent ? 'var(--alert-color)'
          : vijver ? 'lightseagreen' : 'var(--sidebar-icon-color)'; ]]]
    notification: >
      [[[ @partial instellingen
          return wekker ? wakker : ''; ]]]
    notification_color: >
      [[[ @partial instellingen
          return wekker ? 'var(--alert-color)' : 'var(--sidebar-icon-color)'; ]]]
    notification_text_color: ivory
    info: >
      [[[ @partial familie
         return cloud ? 'Cloud: verbonden' : 'Cloud: uitgeschakeld'; ]]]
    info_color: >
      [[[ @partial familie
         return cloud ? 'var(--warning-color)' : 'var(--info-color)'; ]]]

##########################################################################################

  - item: ui-develop
    match: data-panel
    order: 5
    icon: >
      [[[ @partial systeem
          return update ? 'mdi:package-up' : 'mdi:home-assistant'; ]]]
    icon_color: >
      [[[ @partial systeem
          return update || geheugen > 30 ? 'var(--alert-color)' : 'var(--ha-color)'; ]]]
    notification: >
      [[[ @partial systeem
          return geheugen; ]]]
    notification_color: >
      [[[ @partial systeem
          return geheugen > 30 ? 'var(--alert-color)' : 'var(--success-color)'; ]]]
    notification_text_color: ivory
    info: >
      [[[ state_attr('update.home_assistant_core_update','installed_version'); ]]]
    info_color: >
      [[[ @partial systeem
          return update ? 'var(--alert-color)' : 'var(--ha-color)'; ]]]

##########################################################################################

  - item: ui-cctv
    match: href
    order: 6
    icon: >
      [[[ @partial cameras
          return beweging ? 'mdi:camera-control' : 'cli:home-video-outline'; ]]]
    icon_color: >
      [[[ @partial cameras
          return actief ? 'var(--alert-color)' : ''; ]]]
    notification: >
      [[[ @partial cameras
          return beweging ? 'Actie' : 'Rust'; ]]]
    notification_color: >
      [[[ @partial cameras
          return beweging ? 'var(--alert-color)' : 'var(--success-color)'; ]]]
    notification_text_color: ivory
    text_color: >
      [[[ @partial cameras
          return beweging ? 'var(--warning-color)' : 'var(--custom-sidebar-text-color)'; ]]]
    item_background: >
      [[[ @partial cameras
          return beweging ? 'var(--alert-color)' : ''; ]]]

##########################################################################################

  - item: energy
    match: href
    order: 7
    icon: >
      [[[ @partial energy
          return nettov ? 'mdi:home-lightning-bolt'
                        : 'mdi:home-lightning-bolt-outline'; ]]]
    icon_color: >
      [[[ @partial energy
          return nettov ? 'var(--power-color)' : 'brown'; ]]]
    notification: >
      [[[ @partial energy;
          return states(netto); ]]]
    notification_color: >
      [[[ @partial energy;
          return nettov ? 'var(--power-color)' : 'brown'; ]]]
    notification_text_color: ivory
    info: >
      [[[ @partial energy
          return nettov ? 'Levering' : 'Verbruik'; ]]]
    info_color: >
      [[[ @partial energy
          return nettov ? 'var(--power-color)' : 'brown'; ]]]

##########################################################################################

  - item: ui-test
    match: data-panel
    # order: 8
    bottom: true
    icon_color: >
      [[[ @partial test
          return kleuren[deel] || 'var(--error-color)'; ]]]

#       [[[ @partial familie
#           return aanwezig_kleur; ]]]
#     notification: >
#       [[[ @partial familie
#           return fam; ]]]
#     notification_color: >
#       [[[ @partial familie
#           return aanwezig_kleur; ]]]
#     notification_text_color: ivory
#     text_color: >
#       [[[ states('sensor.inside_temperature_color_name'); ]]]
    info: >
      [[[ @partial test
          return kleuren[deel] || 'var(--error-color)'; ]]]
    info_color: >
      [[[ @partial test
          return kleuren[deel] || 'var(--error-color)'; ]]]

##########################################################################################

  - item: ui-configured
    match: data-panel
    # order: 9
    bottom: true

##########################################################################################
# Hide menu items, either here or in HA profile settings
# beware, if hidden in profile settings, this plugin can Not see them and errors on
# referencing them
##########################################################################################

  - item: config
    match: data-panel
    exact: true
    hide: true
  - item: developer-tools
    match: data-panel
    hide: true

#   - item: logbook
#     match: href
#     hide: true
#   - item: lovelace
#     match: href
#     hide: true
# #   - item: Overzicht
# #     match: text
# #     hide: true
#   - item: history
#     match: data-panel
#     hide: true
#   - item: calendar
#     match: data-panel
#     hide: true
#   - item: todo
#     match: data-panel
#     hide: true
#   - item: media
#     hide: true
#   - item: resources
#     hide: true

set

    scrollbar-thumb-color: var(--primary-color)

and have the menu scrollbar thumb be in style.
some of my conditional stylings, mainly animations are still in card-mod theming, as are some of the menu items background settings, which change colors as alerting mechanism. You can find my complete card-mod theme in my gists, but this is the section that takes car of the sidebar:

Note: the keyframes for the animations are inside the sidebar configuration file, and card-mod can use those with below settings

  card-mod-sidebar-yaml: |
    .: |

      {% set afval = states('sensor.afvalwijzer_vandaag')|capitalize %}
      {% set beweging_buiten = is_state('binary_sensor.camera_beweging_buiten','on') %}
      {% set core = is_state('update.home_assistant_core_update','on') %}
      {% set feest = is_state('binary_sensor.feest_alerts','on') %}
      {% set gereed = is_state('binary_sensor.huis_ramen_deuren_puien_veilig','on') %}
      {% set lek = is_state('binary_sensor.watermeter_leak_detected','on') %}
      {% set vent = is_state('input_boolean.ventilate','on') %}

      {% set style_badge_not_expanded %}
        position: absolute;
        box-sizing: border-box;
        min-width: 20px;
        border-radius: 24px;
        font-weight: 400;
        line-height: 20px;
        text-align: center;
        left: 26px;
        font-size: 10px;
        bottom: 20px;
        padding: 0px 2px;
        transform: translateX(-25%);
      {% endset %}

      /* notification badge on collapsed menu icon */
      :host(:not([expanded])) .menu ha-icon-button:after {
        content: "{%- set m_alerts = states('sensor.marquee_alerts')|int(0) %}
                  {{- m_alerts if m_alerts > 0 }}";
        {{style_badge_not_expanded}}
        color: ivory;
        background: var(--alert-color);
      }

      a[data-panel='ui-overzicht'] paper-icon-item {
        {% if lek %}
          animation: blink 2.5s ease infinite;
        {% endif %}
      }

      /*a[data-panel='ui-data'] paper-icon-item ha-icon {
        animation: {{'spin 3s infinite linear' if lek else 'none'}};
      }*/

      /* different animation when not expanded because of spinning badge */
      :host(:not([expanded])) a[data-panel='ui-data'] paper-icon-item ha-icon {
        animation: {{'blink 2.5s ease infinite' if lek else 'none'}};
      }

      /*a[data-panel='ui-data'] paper-icon-item .item-text:after {
        {% set ophaal = 'Afval: ' ~ afval if afval != 'Geen' %}
        content: "🏡 {{ophaal}}";
        color: {{states('sensor.afval_kleur')}};
      }*/

      a[data-panel='ui-familie'] paper-icon-item ha-icon {
        animation: {{'blink 2s ease infinite,spin 3s infinite linear' if feest
                     else 'none'}};
      }

      /* different animation when not expanded because of spinning badge */
      :host(:not([expanded])) a[data-panel='ui-familie'] paper-icon-item ha-icon {
        animation: {{'blink 2.5s ease infinite' if feest else 'none'}};
      }

      /*a[data-panel='ui-familie'] paper-icon-item .item-text:after {
        content: "🎂 {{states('sensor.dagen_tot_volgende_feest')}}";
        color: {{'orange' if feest else 'var(--ok-color)'}};
      }*/

      a[data-panel='ui-instellingen'] paper-icon-item ha-icon {
        animation: {{'blink 2s ease infinite' if vent else 'none'}};
      }

      /*a[data-panel='ui-instellingen'] paper-icon-item .item-text:after {
        content: "⏰ Beveiliging {{'Gereed' if gereed else 'Niet gereed'}}";
        color: {{'var(--ok-color)' if gereed else 'var(--warning-color)'}}
      }*/

      a[data-panel='ui-develop'] paper-icon-item ha-icon {
        animation: {{'blink 2s ease infinite' if core else 'none'}};
      }

      a[data-panel='ui-cctv'] paper-icon-item {
        {% if beweging_buiten %}
          animation: blink 2.5s ease infinite;
        {% endif %}
      }

      /*a[data-panel='ui-cctv'] paper-icon-item .item-text:after {
        content: "📺 {{'Actie' if beweging_buiten else 'Rust'}}";
        color: {{'var(--alert-color)' if beweging_buiten else 'var(--ok-color)'}};
        {{style_secondary}}
      }*/

added clickable Header with navigation