How To Create A Mini Nav With Angular Material’s Sidenav.
Quick & easy guide to implementing a side nav drawer with a mini variant for your Angular application.
Angular Material allows you to add amazing, already working features into your projects, but sometimes not everything suits your needs. In this article I will walk you through how to create a side menu with a mini variant by building upon Angular Material’s sidenav.
For this variant you’re obviously going to need Angular Material installed into your project as we will be building on top of the Sidenav component.
First step, let’s add the mat-sidenav component with some basic navigation. It’s basically the code from the first example on the angular material documentation of the Sidenav component just with some extra styling.
I’ve created a side-nav component which will hold all of the menu content and added it between the mat-sidenav. I’ve also added the same attributes to the mat-sidenav as the Angular Material example, nothing special there.
Here’s what it should look like in the DOM 👇
I’ve already added the icons to the navigation list as that’s what I want to be on show when the mini variant is completed.
If you’re not an Angular Material newbie, I’m sure there have been some times in your projects where you had to override some of material’s css, you may even have special global css file in your project called material-override.css.
This is no exception, add these styles to a your global css file:
If you’re coding along, you’ll probably notice that now the side menu isn’t closing. That’s the behaviour we are looking for. These styles are the key to having the mini nav actually displaying in the DOM, otherwise your mini nav will vanish on close.
We now need to create a boolean variable isExpanded which we will use to toggle between the different menu states. We are also going to move the button that’s currently toggling the menu from open to close to inside the side-nav component.
Declare isExpanded in the parent component that has the mat-sidenav-container element. For this example it’s the app.component.ts which now looks like this ⤵️
You’ll see I’ve created a toggle method and also passed isExpanded down to the child component, in this example it’s sidenav.component.ts. Which is now looking like this 🔽
I’ve added a condition to the tooltip, as I only want to show it when the mini nav is active, add *ngIf to the matLine and toggle the sidenav class which holds the width of the opened menu, all using the same isExpanded variable.
Your DOM should now look something like this 👇
Now all we need is to add some dynamic styling to the mat-sidenav-content element to push the page content depending on if the nav is open or in mini state. Something like this will do:
<mat-sidenav-content [style.margin-left.px]="!isExpanded ? 60 : 250">
Voilà. You’re done 🙌
