Angular Material sidenav mini variant with submenus

Question

I use the Angular 5 and Material design. I have an angular material navigation drawer mini variant as the side navigation menu for my application (see image) With the arrow in the top we hide the items, leaving only the icons.

What I want to do is to add submenus for some of the menu items.

When the menu is collapsed we would have a popover appearing with the links to the submenus: menu popover

When the menu is expanded we would have an arrow to expand the submenu under the menu: menu expanded with children

I found several solutions but none doing exactly this. Here some links: Angular Material Tree

Dynamic nested menu using Angular Material

Bootstrap popover, but I would prefer to find something similar in Angular Material.

And this similar question

Does someone have some idea of how to achieve this ?

Thanks in advance for your help,

Begoña

Answer 1

Maybe this answer could be a comment, but for reasons of text-size limit and visibility, I'm writing it here.

The bad news is that right now, there isn't an official way to do it natively provided by Material.

But the good news is that I've found a nice workaround. I explain you how I'm managing it below:

---

1. Implement this material standard menu(see the last example in the bottom of the page on stackblitz) in your app**, take example by this live example to manage an isExpanded value with its relative icon/text exclusion

2. Then use ngClass directive to add a custom class conditionally on the isExpanded value that will set the width to N px !important, where "N" is a custom value.

   !important is needed to override default values.

3. Now, the most difficult part is the pop-over. You could use this library popovers, or maybe this library's one. Css customization to override positioning and colour values is a must.

   To edit and override the library tags and class properties, use the ::ng-deep prefix (E.G:: ::ng-deep ngb-popover-window { /* customization here */ }).

   The only way to make it going over the material sidenav is with a css override, but it's quite a minefield and the risk is to mess up the current app layout.

   A good alternative to pop-over (and it's also more easy-implementable one) could be to change menu width when mouse is over to show a second column which will contain the sub-section links...

   I've seen something similar here, but it's just to get ideas.

4. For the menu content, consider duplicating your code with different behaviours depending on isExpanded value, so you can "easily" manage a treeview and a pop-over submenu view.

SOURCE: I'm doing this right now

Hope it will help!