Angular 6 — Mini-Variant Drawer

Harkirat Singh
Aug 31, 2018 · 1 min read

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.

Harkirat Singh

Written by

working as an UI Developer with expertise in React JS, Node JS and Angular.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade