Instantly share code, notes, and snippets.
Last active
June 16, 2026 13:02
-
Star
2
(2)
You must be signed in to star a gist -
Fork
0
(0)
You must be signed in to fork a gist
-
-
Save Mariusthvdb/b5ba9b8e2baf6a4e503fda2a3c3f9f1f to your computer and use it in GitHub Desktop.
custom-sidebar-config
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| ########################################################################################## | |
| # Global settings Custom sidebar https://github.com/elchininet/custom-sidebar | |
| # version https://github.com/elchininet/custom-sidebar/releases/tag/v15.0.0 | |
| # introducing state_translated function | |
| # @mariusthvdb 2026-06-04 | |
| # https://community.home-assistant.io/u/mariusthvdb/summary | |
| # | |
| # still in UIX theme: conditional animations and the notification badge on collapsed menu icon | |
| ########################################################################################## | |
| # default_path: /ui-overzicht/welkom | |
| # 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: rgba(from var(--primary-color) r g b /0.2) #var(--hover-color) | |
| item_background_hover_opacity: 1 | |
| # sidebar_background: green # dont set here, because double declaration in items | |
| ########################################################################################## | |
| # add styling to the plugin settings, and center the badges | |
| ########################################################################################## | |
| # @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);} | |
| # } | |
| styles: | | |
| @keyframes marquee { | |
| from {transform: translateX(0%);} | |
| to {transform: translateX(35%);} | |
| } | |
| :host([expanded]) ha-list-item-button > .badge { | |
| /*position: relative;*/ | |
| transform: translateX(50%); | |
| max-width: 44px; | |
| margin: 0 16px 0 0; | |
| } | |
| :host(:not([expanded])) ha-list-item-button > .badge { | |
| font-size: 0.7em; | |
| transform: translateX(-50%); | |
| max-width: 30px; | |
| top: 0px; | |
| } | |
| .menu .title:after { | |
| font-weight: bold; | |
| animation: marquee 4s alternate infinite; | |
| } | |
| # Only fixed animations! | |
| # When dynamic, based on conditions, requires uix theme | |
| ########################################################################################## | |
| # 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 | |
| rook: binary_sensor.rook_co_lekkage | |
| veilig: binary_sensor.huis_ramen_deuren_puien_veilig | |
| leakage: binary_sensor.watermeter_leak_detected | |
| trash: sensor.afvalwijzer_vandaag | |
| trash_color: sensor.afval_kleur | |
| boiler_kleur: sensor.zonneboiler_temperatuur_kleur | |
| boiler: sensor.opentherm_dhw_temperature | |
| # klimaat | |
| klimaat: binary_sensor.klimaat_woonkamer_alert | |
| # 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 | |
| levering: binary_sensor.netto_stroom_teruglevering | |
| netto: sensor.netto_verbruik | |
| # test | |
| dag_deel: sensor.dag_deel | |
| ########################################################################################## | |
| # Partials derived from the global variables | |
| ########################################################################################## | |
| partials: | |
| # window.capitalize = window.capitalize || ((str) => str[0].toUpperCase() + str.slice(1)); | |
| # window.translated = window.translated || function(entityId) { | |
| # let retry = 0; | |
| # return new Promise((resolve) => { | |
| # const getStateTranslated = () => { | |
| # const rawStates = states(entityId); | |
| # const translation = state_translated(entityId); | |
| # if (translation !== rawStates) { | |
| # resolve(translation); | |
| # } else if (retry < 100) { | |
| # retry++; | |
| # setTimeout(getStateTranslated, 100); | |
| # } else { | |
| # resolve(rawStates); | |
| # } | |
| # }; | |
| # getStateTranslated(); | |
| # }); | |
| # }; | |
| functies: | | |
| const capitalize = str => str[0].toUpperCase() + str.slice(1); | |
| const translated = (entityId) => { | |
| let retry = 0; | |
| return new Promise((resolve) => { | |
| const getStateTranslated = () => { | |
| const rawStates = states(entityId); | |
| const translation = state_translated(entityId); | |
| if (translation !== rawStates) { | |
| resolve(translation); | |
| } else if (retry < 100) { | |
| retry++; | |
| setTimeout(getStateTranslated, 100); | |
| } else { | |
| resolve(rawStates); | |
| } | |
| }; | |
| getStateTranslated(); | |
| }); | |
| }; | |
| const titleClick = () => { | |
| const path = '/ui-overzicht/welkom'; | |
| window.history.replaceState(null, '', path); | |
| window.dispatchEvent( | |
| new CustomEvent('location-changed', { | |
| detail: { | |
| replace: path | |
| } | |
| }) | |
| ); | |
| }; | |
| # 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); | |
| klimaat: | | |
| @partial functies | |
| const ventileer_tl = translated(klimaat); | |
| const gevaar = is_state(klimaat,'on'); | |
| data: | | |
| @partial functies | |
| const afval = (states(trash)); | |
| const afval_kleur = states(trash_color); | |
| const gevaar = is_state(rook,'on'); | |
| const gesloten = is_state(veilig,'on'); | |
| const lek = is_state(leakage,'on'); | |
| const boil_kleur = states(boiler_kleur); | |
| const boil_temp = states(boiler, { with_unit: true }); | |
| const rook_tl = translated(rook); | |
| 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 = is_state(levering,'on'); | |
| const energy_color = nettov ? 'var(--power-color)' : 'brown'; | |
| 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)' | |
| : 'var(--app-header-background-color)'; ]]] | |
| title: | | |
| [[[ | |
| @partial functies @partial title | |
| window.titleClick = titleClick; | |
| const event = 'ontouchstart' in window | |
| ? 'ontouchstart' | |
| : 'onclick'; | |
| return `<span style="cursor:pointer" | |
| ${event}="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 kerst ? 'url(/local/season/kerst_smurfen.png)' : 'inherit'; ]]] | |
| # meteoalarm ? weeralarm | |
| # : | |
| # scrollbar_thumb_color: red #set in ha themes with scrollbar-thumb-color: var(--primary-color) | |
| order: | |
| ########################################################################################## | |
| # Dashboards | |
| ########################################################################################## | |
| - item: ui-overzicht | |
| match: href | |
| # 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: href | |
| # order: 2 | |
| # in uix... | |
| 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 rook_tl; ]]] | |
| 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 gesloten ? 'Huis Gesloten' : 'Huis Geopend'; ]]] | |
| info_color: > | |
| [[[ @partial data | |
| return gesloten ? 'var(--success-color)' : 'var(--alert-color)'; ]]] | |
| item_background: > | |
| [[[ @partial data | |
| return lek ? 'lightblue' : ''; ]]] | |
| ########################################################################################## | |
| - item: huis-klimaat | |
| match: href | |
| # order: 2 | |
| # in uix... | |
| icon: > | |
| [[[ @partial klimaat | |
| return gevaar ? 'mdi:fan' : 'mdi:home-thermometer'; ]]] | |
| icon_color: > | |
| [[[ @partial klimaat | |
| return gevaar ? 'var(--alert-color)' : 'var(--success-color)'; ]]] | |
| notification: > | |
| [[[ @partial klimaat | |
| return ventileer_tl; ]]] | |
| notification_color: > | |
| [[[ @partial klimaat | |
| return gevaar ? 'var(--alert-color)' : 'var(--success-color)'; ]]] | |
| notification_text_color: ivory | |
| info: | | |
| [[[ @partial data | |
| return 'Zonneboiler: ' + boil_temp; ]]] | |
| info_color: > | |
| [[[ @partial data | |
| return boil_kleur; ]]] | |
| ########################################################################################## | |
| - item: ui-familie | |
| match: href | |
| # order: 3 | |
| # in uix... | |
| icon: > | |
| [[[ @partial familie | |
| return feest ? 'mdi:party-popper' : 'mdi:home-account'; ]]] | |
| 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: href | |
| # order: 4 | |
| icon: > | |
| [[[ @partial instellingen | |
| return vent? 'mdi:fan' : 'cli:home-cog' ]]] | |
| icon_color: > | |
| [[[ @partial instellingen | |
| return wekker ? 'var(--alert-color)' : 'var(--succes-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: href | |
| # order: 5 | |
| icon: > | |
| [[[ @partial systeem | |
| return update ? 'mdi:package-up' : 'mdi:home-assistant'; ]]] | |
| icon_color: > | |
| [[[ @partial systeem | |
| return update || geheugen > 50 ? 'var(--alert-color)' : 'var(--ha-color)'; ]]] | |
| notification: > | |
| [[[ @partial systeem | |
| return geheugen; ]]] | |
| notification_color: > | |
| [[[ @partial systeem | |
| return geheugen > 50 ? '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)' : ''; ]]] | |
| info: > | |
| [[[ @partial data | |
| return afval === 'geen' ? ' ' : capitalize(afval) ; ]]] | |
| info_color: > | |
| [[[ @partial data | |
| return afval_kleur; ]]] | |
| ########################################################################################## | |
| - 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 energy_color; ]]] | |
| notification: > | |
| [[[ @partial energy; | |
| return states(netto); ]]] | |
| notification_color: > | |
| [[[ @partial energy; | |
| return energy_color; ]]] | |
| notification_text_color: ivory | |
| info: > | |
| [[[ @partial energy | |
| return nettov ? 'Levering' : 'Verbruik'; ]]] | |
| info_color: > | |
| [[[ @partial energy | |
| return energy_color; ]]] | |
| divider: true | |
| divider_color: > | |
| [[[ @partial energy | |
| return energy_color; ]]] | |
| ########################################################################################## | |
| # Bottom dashboards | |
| # include order number to force correct positioning | |
| ########################################################################################## | |
| - item: ui-utiliteiten | |
| match: href | |
| # order: 8 | |
| - item: ui-test | |
| match: href | |
| # order: 9 | |
| # bottom: true | |
| icon_color: > | |
| [[[ @partial test | |
| return kleuren[deel] || 'var(--error-color)'; ]]] | |
| info: > | |
| [[[ @partial test | |
| return kleuren[deel] || 'var(--error-color)'; ]]] | |
| info_color: > | |
| [[[ @partial test | |
| return kleuren[deel] || 'var(--error-color)'; ]]] | |
| ########################################################################################## | |
| # Ui dashboards in Bottom | |
| ########################################################################################## | |
| - item: ui-configured | |
| match: href | |
| # order: 10 | |
| # bottom: true | |
| - item: huis-per-ruimte | |
| match: href | |
| # order: 11 | |
| # bottom: true | |
| icon_color: var(--success-color) | |
| info: > | |
| {{floors()|count}} Floors, {{areas()|count}} Areas | |
| info_color: var(--error-color) | |
| notification: > | |
| {{floors()|count}} | {{areas()|count}} | |
| notification_color: green | |
| # - item: dashboard-areas | |
| # match: href | |
| # order: 11 | |
| # bottom: true | |
| # icon_color: var(--warning-color) | |
| # info: > | |
| # Gegroepeerd in {{floors()|count}} 'floors' | |
| # info_color: var(--info-color) | |
| # notification: > | |
| # {{areas()|count}} | |
| # notification_color: green | |
| - item: per-ruimte-auto | |
| match: href | |
| # order: 12 | |
| # bottom: true | |
| - item: dashboard-ruimtes | |
| match: href | |
| # order: 13 | |
| # bottom: true | |
| - item: home | |
| match: href | |
| # order: 14 | |
| # 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: light | |
| # match: href | |
| # hide: true | |
| # | |
| # - item: security | |
| # match: href | |
| # hide: true | |
| # | |
| # - item: climate | |
| # match: href | |
| # hide: true | |
| # | |
| # # - item: browser-mod | |
| # # match: href | |
| # # hide: true | |
| # | |
| - item: /config | |
| match: href | |
| hide: true | |
| - item: Meldingen | |
| match: exact | |
| order: 1 | |
| bottom: true | |
| # hide: true | |
| - item: /profile | |
| order: 2 | |
| # item_background: > | |
| # [[[ is_state('person.marijn','home') ? 'green' : 'gray'; ]]] | |
| # text_color: > | |
| # [[[ is_state('person.marijn','home') ? 'ivory' : 'black'; ]]] | |
| bottom: true | |
| match: href | |
| # # | |
| # # - item: logbook | |
| # # match: href | |
| # # hide: true | |
| # # - item: history | |
| # # match: href | |
| # # hide: true | |
| # # - item: calendar | |
| # # match: href | |
| # # hide: true | |
| # # - item: todo | |
| # # match: href | |
| # # hide: true | |
| # # - item: media | |
| # # hide: true | |
| # # - item: resources | |
| # # hide: true |
Author
that must be available in the community in the dedicated thread.
Not sharing images here preferably
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
You have a screenshot of the result?