Any recommendations on how to best create a left side-bar menu that has hierarchy with expanding and collapsing items, and you can highlight current selection?
I’ve implemented something with the Tree add-on but it’s coming up short. I’m not able to style the currently selected/clicked item to highlight it with a different color, etc. More on this in https://vaadin.com/directory/component/tree/discussions
Attached is what I have today without the selected item highlight.
Accordion is interesting but in the mockup I just did I found it requires some significant work in a few areas to make it work as a menu. Menu nodes that have no children when implemented in Accordion result in the expand/contract “>” and “V” being displayed. When expanding some whitespace appears below the caption of the Accordion where the panel is suppose to be.
Also I need to implement indenting to the right of each child entry.
I’m thinking Accordion might not be the best building block to work with.
The app-layout addon looks close to what I’d like. Unfortunately from the demo it looks like submenus are not indented/right-shifted which I think is very important for UX.
I ultimately wound up implementing my own side menu using a VerticalLayout as the holder and each menu item as a HorizontalLayout composed of a Button for the expand/contract (‘>’, ‘V’) and a Button to hold the item icon and caption.
Thanks everyone for your suggestions! I definitely appreciate hearing my options before I spent time implementing my own.