Material Sidenav: Custom Collapse/Expand behaviour


You may have used Angular Material Sidenav component in your projects before, however, it just vanishes when collapsed by default. What if you want the Sidenav to be visible with side links having icons only when collapsed? Off-course, you can have 2 Sidenavs (one with icons + text and another with icons only) and show/hide them conditionally. But by design, Angular Material Sidenav does not let you have 2 Sidenavs in the same position.

So here is how I’ve devised a clever way to do away with the said limitation.

You can watch the video below👇 to see it in action or grab the source code from Github.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.