sidebar style menu similar to vaadin docs

Hello,
I really like the sidebar menu for the Vaadin documentation,
https://vaadin.com/docs/-/part/framework/introduction/intro-overview.html
. What I want to be able to do is click on something to show sub-menu items. As an example, clicking on “Introduction” expands it, showing “Overview”, etc, with the little arrow pointing up. Then if you click it again, the menu collapses, and the little arrow points down. Note that this is more complex then the Vaadin demo, which is simply a CssLayout with buttons added to it to “navigate to” different views. Maybe it is sort of like “accordion”?

Thanks.

Hi,

Take a look at the
SideMenu add-on
.

-Olli

Thanks so much. But how is this different then the dashboard demo? I already have the dashboard demo sidebar menu. I want one like what they use in the
docs ( same link as in original message )
. Don’t get me wrong, it looks handy, I just don’t see how to use it to do what I described. Maybe I need to be more specific with some pictures. Attached is exactly what I am trying to do. These pictures are taken directly from the above link, and I circled in red the little arrow I mentioned in my first post. Truth be told, I don’t care that much about the circled arrow. I care mostly for the ability to click on a header to expand or colapse the sub-menu in question.

28813.png
28814.png

Ah. How about
TreeTable
or a
Tree
?

-Olli

BTW, I asked the same question on
StackOver flow
, worded a little differently.

“Tree” is close, but requires you to click on the arrow, not the caption. I want it precisely like the docs page. My request is very similar to the question
here
, where they advise using melodion ( not supported by Vaadin 7 ). Maybe
Accordion
would provide some of what I want, but even that is not precisely what I want. Then again, the
StackPanel add-on
looks promising.

Hi,

you can add an ItemClickListener to Tree and expand/collapse the node in that one. Something like this:

tree.addItemClickListener(event -> {
  Object itemId = event.getItemId();
  if (tree.isExpanded(itemId) {
    tree.collapseItem(itemId);
  } else {
    tree.expandItem(itemId);
  }
});

-Olli

Well, this is close. Not precisely what I want. For instance, if I use an icon for each item, icon has same color as caption - the two use the same style, it seems. Also, kind of hard to set hover color for the icon, for the same reason. The root cause seems to be that the icon DIV in the resulting HTML is a sub-element of the caption DIV. For buttons, they are separate, from a stylistic perspective ( in the resulting, they are two totally separate DIV elements, in fact ). Am I missing something, per chance? I am no CSS expert, so I suppose it is possible.

Yes, you should be able to target specific divs. I’m not 100% sure what your DOM looks like at that point, but take a look at the
child
,
first-child
and
nth-child selectors
.

-Olli

Not as easy as you seem to think. I have tried both Tree and StackPanel and both do not fit well with valo-menu, having very similar sylistic problems. I will keep looking, but I am shocked that such a common website feature, one that I KNOW Vaadin in general can do because they use it for their documentation page ( see links in prior posts ), is so difficult.

Ok, finally got StackPanel to work. I probably also could have gotten Tree to work using your CSS ideas, I just happen to like how StackPanel behaved slightly better - purely a matter of preference, in this case. Thanks for your help.

BTW, the one CSS thing I could not solve was with a icon buried in stack panel - I could get the icon attached to my Panel to turn white on hover, but I could not get the buried icon to turn white on hover unless I hovered over the actual icon. This is so minor, no one would even notice it but me, so ignoring it.

Good to hear you got it working like you want to, more or less. I think the hover effect you’re trying to achieve might need some JavaScript trickery, unfortunately.

-Olli