Feature request: Collapsible elements

[goliath888]

Would be possible to implement collapsible elements? In the example, "Applications" would be collapsible when click on it, letting you have more applications in the screen, grouped by category, and in a more clean way.

I have been playing a bit with something like this But I have no experience in vuejs, and I am afraid I have not the level enough to do it by myself with a result worth sharing with you.

[bastienwirtz]

Hey @goliath888,

That's would be nice yes, with maybe memorizing the group state in local storage like the dark theme preference, so when you come back the elements stays like you left them. I'm adding that to my todo list :+1:

[Aidan-B]

Hey @bastienwirtz! I would love to tackle this. I have been playing around and have some ideas. Just so we are on the same page here:

• Each group would have its own collapsible panel
• Clicking the group heading would hide/show the list of services for that group. It would not have an effect on the other groups.
• There is some indicator (eg. fa-chevron-down/up) to show if a group is collapsed
• There is some form of smooth transition that hides the elements
• The previous state of the collapsed group is saved in localstorage

Let me know if there are any issues, or if you think I have missed anything!

[hydrian]

I would also say have each service group has a default collapse state setting in the YAML config.

I have a few service groups that are just for administration for my family's home network dashboard. They really don't need them showing expanded by default.