[FIXED] How can we create a sidenav bar that is responsive using only angular material?

Issue

Can I use Angular materials 4 to create a similar behavior of the following sidenav example made with mdbootstrap: the link shows a responsive sidenav with buttons with lists.

I don't want to use bootstrap 4 as it needs to add javascript and jQuery libraries for most of the components. And mdbootstrap uses jquery in some features.

If there is any other libraries, feel free to mention it.

Solution

If you combine the angular material sidenav and expansion panel components, you should be able to replicate the same design and functionality.

This is a quick example by simply copying a expansion panel into a responsive sidenav (both examples from angular material):

https://stackblitz.com/edit/angular-akre5x?file=app/sidenav-responsive-example.html

Answered By - pfeileon

Answer Checked By - Marie Seifert (PHPFixing Admin)