Angular 6 — Mini-Variant Drawer

Functionality:

When toggled, the side bar will convert to a mini-variant of the original side bar.

While working on a Angular project,I came across a requirement for building a mini-variant side-nav bar and so I researched about it and found there is no proper example or guide available to do the same.

So, I thought of writing this small story in order to guide the wanderers in search of a simple work around for doing the same.

While going through Angular Material I came across Autosize. It lets us change the width of drawer even when it is opened. Along with a simple “ngif statement”, I was able to manipulate the width of the sidebar and voila we get our mini-variant sidenav/sidebar.

Here is the code for doing the same.