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.