Instantly share code, notes, and snippets.
Last active
July 17, 2025 17:26
-
Star
0
(0)
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.
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/v10.4.0 | |
| # introducing state_translated function | |
| # @mariusthvdb 16-07-2025 | |
| # https://community.home-assistant.io/u/mariusthvdb/summary | |
| # | |
| # still in card_mod 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: var(--hover-color) #new in v7.0.0 replace card_mod a:hover paper-icon-item | |
| item_background_hover_opacity: 1 | |
| # sidebar_background: green | |
| ########################################################################################## | |
| # 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([expanded]) ha-md-list-item > .badge { | |
| position: relative; | |
| transform: translateX(50%); | |
| max-width: 45px; | |
| right: 18px; | |
| } | |
| :host(:not([expanded])) ha-md-list-item > .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 card_mod 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 | |
| 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 | |
| # 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); | |
| 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); | |
| data: | | |
| const afval = (states(trash)); | |
| const afval_kleur = states(trash_color); | |
| const gevaar = is_state(rook,'on'); | |
| const lek = is_state(leakage,'on'); | |
| const boil_kleur = states(boiler_kleur); | |
| const boil_temp = states(boiler, { with_unit: true }); | |
| @partial functies | |
| 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 = states(netto) < 0; | |
| 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)' : 'none'; ]]] | |
| 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)' | |
| : 'var(--sidebar-background-color)'; ]]] | |
| # 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 | |
| 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; ]]] | |
| # [[[ @partial data | |
| # return gevaar ? 'Gevaar' : 'Veilig'; ]]] | |
| # the new state_translated function doesnt work here, because state doesnt change often, so we use promise funtion | |
| 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 'Zonneboiler: ' + boil_temp; ]]] | |
| # [[[ @partial data | |
| # const unit = state_attr(boiler,'unit_of_measurement'); | |
| # return 'Zonneboiler: ' + Math.round(boil_temp) + ' ' + unit; ]]] | |
| info_color: > | |
| [[[ @partial data | |
| return boil_kleur; ]]] | |
| item_background: > | |
| [[[ @partial data | |
| return lek ? 'lightblue' : ''; ]]] | |
| ########################################################################################## | |
| - item: ui-familie | |
| match: href | |
| order: 3 | |
| 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 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: href | |
| 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)' : ''; ]]] | |
| # no need to import partial functies for capitalize here, as it is already imported | |
| # in partial data earlier on. Importing again leads to error of declaring twice | |
| 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-test | |
| match: href | |
| order: 8 | |
| 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: 9 | |
| bottom: true | |
| - item: huis-per-ruimte | |
| match: href | |
| order: 10 | |
| bottom: true | |
| icon_color: var(--success-color) | |
| info: > | |
| {{areas()|count}} Areas | |
| info_color: var(--error-color) | |
| notification: > | |
| {{floors()|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 | |
| ########################################################################################## | |
| # 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: href | |
| # exact: true | |
| hide: true | |
| - item: developer-tools | |
| match: href | |
| 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 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment