It took some time, but thanks to these tips I managed to create a menu with hiding and showing items. If it helps anyone, here’s how I did it: I created a separate hide-value for each parent (e.g. hide1 for menu item 1, hide2 for menu item 2, etc.). To ensure that the children are then displayed under the parent, the parent and the child are assigned an order number according to the following pattern: parent 0, child1 0.1, child2 0.2 etc. In the code and as a result it looks ok for me, only the indentation with bigger padding-left did not work yet…
Perfect, I’ll give some tips:
It is now possible to declare reactive variables in js_variables and give them an initial value. In that way you don’t need to declare them in the templates and check for the undefined value:
js_variables:
hide1: 'ref(false)'
hide2: 'ref(false)'
order:
- new_item: true
...
hide: '[[[ ref('hide1').value ]]]'
Optionally, if you have a more complex logic, you can use partials to reuse that logic and in that way avoid repeating the same multiple times:
partials:
toggle_group: |
const toggleGroup = (id) => {
const group = ref(id);
group.value = !group.value;
};
order:
- new_item: true
...
on_click:
action: 'javascript'
code: |
@partial toggle_group
toggleGroup('hide1');
About adding a padding to the groups, I recommend to add an attribute to all the children and create a style targeting these items (modify the styles at your will):
order:
- new_item: true
...
attributes:
data-child: true
styles: |
:host a[role="option"][data-child] > paper-icon-item {
padding-left: 24px;
padding-inline-start: 24px;
--mdc-icon-size: 16px;
--paper-item-icon-width: 43px;
}
By the way, take a look at this project from @VietNgoc. If your objective is to create groups in the sidebar, that is a great way to achieve it.
Hi @elchininet
after the last update (not sure which one, but I suspect the last), something changed with the positioning of the notification on the menu items. They no longer are centered like before. (which was only 2 days ago?)
any idea what could have fluked? seems the now force along to the right.
using this styling:
: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;
}
I can set the !important to the transform, but the positioning itself has also moved sideways… not sure if this is what you intended with the last few changes?
it’s a bit of an issue, because the
left: calc(var(--app-drawer-width,248px) - 32px);
no longer works, and I can not set the horizontal position anymore with that except also using the override there. (and change the pixel number:
left: calc(var(--app-drawer-width,248px) - 28px) !important;
transform: translateX(-50%) !important;
so, it seems to work after all… but with the required extras there.
There was a change in the styles to fix a bug, the styles are now more specific so it seems that your override is less specific now. You just need to change:
:host paper-icon-item > .notification-badge:not(.notification-badge-collapsed) {
by:
:host paper-icon-item:not(.notifications) > .notification-badge:not(.notification-badge-collapsed) {
With this specificty, most probably you can remove the !important
1 Like
Thanks, I can confirm that works.
I had figured the change was only meant for the collapsed menu issue, and was surprised this still works like before:
: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;
}
Yes, that one is OK because that element is created by the plugin and its styles have the same specificity.
Guys, how are you setting the background of the sidebar? I just need to have there the same background as my Overview dashboard (I use iOS theme).
Hi @MartinF11,
Check all the themeable options available. The option that you are searching for is sidebar_background.
Regards
1 Like
Post your config and a screenshot of the styles of the ha-sidebar element in the Developer tools of your browser. It should be something like this:
Theme file for border-radius
card-mod-sidebar-yaml: |
.: |
:host {
border-bottom-right-radius: 30px !important;
border-top-right-radius: 30px !important;
}
.iron-selected paper-icon-item::before {
border-radius: 30px !important;
padding: 12dp !important;
}
.iron-selected paper-icon-item {
border-radius: 30px !important;
padding: 12dp !important;
}
.iron-selected paper-icon-item ha-icon {
border-radius: 30px !important;
padding: 12dp !important;
}
Sidebar config file
title: 'Home'
subtitle: 'Welcome Home'
sidebar_background: grey
Show the rest of the styles until you reach the part of the custom sidebar styles that you see in my screenshot:
By the way, I am seeing that you set up sidebar_background in grey (which is #808080). That is the color of your sidebar.
This is picking that color in Photoshop:
What color are you expecting there?
Oh the color is just an example tbh, I’m tryna get the border-radius to also affect the background behind it so it looks more like this
Here’s how my app looks now, 2 colours rather then rounding the whole thing
Ah, now I understand, you mean the color that you see behind the sidebar in that screenshot. That is because what you see behind the sidebar doesn’t belong to the sidebar itself. You would need to style an element named aside (which have the class .mdc-drawer). It is an element under the shadowRoot of the ha-drawer element. But take into account that this element cannot be targeted with card-mod as far as I know.
Edit: also take into account that even if you were able to style that element, the result will not be what you expect because you will have the Home Assistant background color and the container of the dashboard is straight. In the next screenshot I have rounded the sidebar and set a different border-radius and a different color red in the aside element just to show you why you will not get the result that you are expecting (you can see the dark Home Assistant background and the color of the dashboard).
1 Like
Ah damn thanks for looking into it, so I guess it’s a hardcoded element of home assistant we can’t mess with then. Not even through the theme file?
Weird how there’s like 3 different layers there based off the screenshot but I’m not a HA dev lol, thanks.
Not that I am aware of. You would need a custom plugin to style that element. But even if you were able to do it, you will not reach your desired result.
1 Like
I want to add a notification with the active number of lights per area. And when there is no light on i don’t want to see the notification. Is this possible?
Yes, custom-sidebar admits JavaScript or Jinja templates. So, you can write a template getting that data and returning a number when you want the notification to appear or return an empty string when you don’t want to display it.
Hey does anyone know if its possible to adjust the sidebar based on the active theme?
The below works but I have different images for different themes.
sidebar_background: |
[[[
if (panel_url.startsWith('/lovelace')) {
return 'center / cover no-repeat fixed url("/local/ios-themes/homekit-bg-dark-blue.jpg")';
}
return 'var(--sidebar-background-color)';
]]]
Also is it possible to make the sidebar background completely invisible?
I’ve had no success using “transparent”, theres always like a grey color over the theme background.