I am relatively new to ha and i am working on a floorplan. I would like to use this sidebar but i am confused where and how i need to install it. could someone help me with that? perhaps a screenshot?
Hi, here is an example of my dashboard.
# Swiss Army Knife Templates
sak_sys_templates: !include ../www/community/swiss-army-knife-card/sak_templates.yaml
# The user templates are created by the user
sak_user_templates: !include ../lovelace/sak_templates/sak_templates.yaml
# Mon tableau de bord.
title: Mon Tableau
# Menu de gauche.
sidebar:
width:
mobile: 0
desktop: 25
hideTopMenu: true
showTopMenuOnMobile: true
digitalClock: true
date: true
dateFormat: dddd DD MMMM
style: |
:host {
--sidebar-background: #000D29;
--sidebar-text-color: #BDC1C6;
--face-color: #00F031;
--face-border-color: #FFF;
--sidebar-selected-text-color: rgb(3, 169, 244);
--sidebar-selected-icon-color: rgb(3, 169, 244);
background-image: linear-gradient(115051deg, #000000, #151515, #1C1C1C, #2E2E2E, #424242, #585858);
}
.sidebarMenu li {
line-height: 15px!important;
font-weight: 400!important;
}
.sidebarMenu li ha-icon {
margin-top: -3px !important;
}
.bottom {
width: 100% !important;
color: #585858!important;
}
.digitalClock {0
color: rgba(255, 255, 255, 0.7)!important;
font-size: 5.41vw!important;
font-weight: 500!important;
letter-spacing: -0.05vw!important;
text-align: center;
}
.date {
color: rgba(255, 255, 255, 0.7)!important;
font-size: 2.00vw!important;
font-weight: 400!important;
letter-spacing: -0.05vw!important;
text-align: center;
}
.template {
text-align: center;
font-weight: 500!important;
}
sidebarMenu:
- action: navigate
navigation_path: /tableau-michel/vue-page-Information
icon: ios:retour-maison#fullcolor
name: Infomations
- action: navigate
navigation_path: /tableau-michel/vue-page-calendriers
icon: ios:calendrier#fullcolor
name: Calendriers
- action: navigate
navigation_path: /tableau-michel/vue-page-hydro-quebec
icon: ios:hydro-quebec#fullcolor
name: Hydro-Québec
- action: navigate
navigation_path: /tableau-michel/vue-page-meteos
icon: ios:meteo#fullcolor
name: Météo
- action: navigate
navigation_path: /tableau-michel/vue-page-formule-un
icon: ios:f1-voiture-orange#fullcolor
name: Formule Un
- action: navigate
navigation_path: /tableau-michel/vue-page-systeme
icon: ios:ordinateur#fullcolor
name: Système
- action: navigate
navigation_path: /tableau-michel/vue-page-suivi
icon: ios:suivi#fullcolor
name: Suivi
- action: navigate
navigation_path: /tableau-michel/vue-page-piles
icon: ios:pile#fullcolor
name: Piles
# - action: navigate
# navigation_path: /tableau-michel/vue-page-tests
# icon: mdi:test-tube
# name: Tests
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- !include Cartes/Carte-Agenda.yaml
cardStyle: |
:host {
width: 100%;
}
template: >
<li>
{% if now().hour < 6 %} 🌙 Bonne nuit {{user}}!
{% elif now().hour < 12 %} 🌞 Bon matin {{user}}!
{% elif now().hour < 18 %} 😎 Bon après-midi {{user}}!
{% else %} 🌜 Bonne soirée {{user}}! {% endif %}
</li>
<li>
{% if states('sensor.nombre_de_lumieres_allumees') < '2' %}
💡 {{ states('sensor.nombre_de_lumieres_allumees') }} Lumière allumée
{% else %}
💡💡 {{ states('sensor.nombre_de_lumieres_allumees') }} Lumières allumées
{% endif %}
</li>
views:
# Vue Test
# - !include Vues/A-Vue-Test.yaml
# Vue pages
- !include Vues/Vue-Informations.yaml
- !include Vues/Vue-Calendriers.yaml
- !include Vues/Vue-Hydro-Quebec.yaml
- !include Vues/Vue-Meteo.yaml
- !include Vues/Vue-Formule-Un.yaml
- !include Vues/Vue-Systeme.yaml
- !include Vues/Vue-Suivi.yaml
- !include Vues/Vue-Piles.yaml
- !include Vues/Vue-Medias.yaml
# Sous Vue pièces
- !include Sous-Vues/Sous-Vue-Piece-Salon.yaml
- !include Sous-Vues/Sous-Vue-Piece-Cuisine.yaml
- !include Sous-Vues/Sous-Vue-Piece-Salle-A-Manger.yaml
- !include Sous-Vues/Sous-Vue-Piece-Salle-Deau.yaml
- !include Sous-Vues/Sous-Vue-Piece-Bureau.yaml
- !include Sous-Vues/Sous-Vue-Piece-Chambre-Maitres.yaml
- !include Sous-Vues/Sous-Vue-Piece-Salle-De-Bain-Maitres.yaml
- !include Sous-Vues/Sous-Vue-Piece-Salle-De-Repos.yaml
- !include Sous-Vues/Sous-Vue-Piece-Salle-Familiale.yaml
- !include Sous-Vues/Sous-Vue-Piece-Chambre-Invites.yaml
- !include Sous-Vues/Sous-Vue-Piece-Atelier.yaml
- !include Sous-Vues/Sous-Vue-Piece-exterieur.yaml
I do not have resources and views do i need to create those?
Is your dashboard written in the configuration.yaml file?
How do you build your dashboard? UI, Storage Mode or Yaml Mode?
In the ui i think. I go to the dashboard then click on edit dashboard on the right side. I wanted to share a screenshot but the forum gives me an error message…
You can add the sidebar using the following steps:
Select the three dots at the top right.
Choose to modify the dashboard.
Select the three dots at the top right and Select Configuration Editor.
Add the sidebar code, before the View parameter:
Sorry, but it’s impossible to add screenshots at the moment.
Attention: Do not use the hideTopMenu parameter: at true as I did the first time, you will lose access to your dashboard. 
Thanks, it worked I first tried the small part of the code and removed the hideTopMenu. After that I added the full code again but forgot to remove the hideTopMenu so now I do not have acces.
How can I get my acces back ? 
I fixed it, removed the sidebar from hacs and now my dashboard is back haha 
Next time the top menu is hidden you can add “?sidebarOff” add the end of your url and it will show the menu’s
Thanks!
How can I make the sidebar shorter?
The top clock is not visible. unfortunately I cannot add a picture 
In the clock style settings, you can add the following parameter and adapt it according to your needs.
padding-top: 70px
.digitalClock {0
color: rgba(255, 255, 255, 0.7)!important;
font-size: 5.41vw!important;
font-weight: 500!important;
letter-spacing: -0.05vw!important;
text-align: center;
padding-top: 70px
}
1 Like
Do you have that background linear - gradient also on the right side of your dashboard?
I’m not sure I understand, but the background color degrades from top to bottom and from right to left.
You can see it here, GitHub - MichelJourdain/Mon-Tableau-De-Bord
I mean if it is possible to have that same background color on the right side of the dashboard? so not the sidebar but like this:
What is highlighted in red
Yes,
Remove this line :
background-image: linear-gradient(115051deg, #000000, #151515, #1C1C1C, #2E2E2E, #424242, #585858);`
Change the color of --sidebar-background: to : #191c1c
style: |
:host {
--sidebar-background: #191c1c;
--sidebar-text-color: #BDC1C6;
--face-color: #00F031;
--face-border-color: #FFF;
--sidebar-selected-text-color: rgb(3, 169, 244);
--sidebar-selected-icon-color: rgb(3, 169, 244);
Thanks for the answer but I do not mean removing the gradient background from the sidebar.
I want the sidebar background also on the right side 
Hi where did you get that background?
how did you get music assistant to work as i get permission denied when ingress
What are add-on are you using for that themp-hum graph?
How do you add the bottons in the menu tap
Could you share your code?