Responsive sidebar menu with Angular material

There are many ways to create a responsive side navbar menu with Angular material, here I will show one of the way to achieve the same.

Now a days as there are multi dimension devices i.e. mobile, tablets, computer, so we need to make everything responsive as much as possible.

Below is the result where we can see the responsive sidebar menu

Side Navbar with Angular material

Now let’s start by creating the angular app by using below command.

ng new sidenavbar --style=scss --routing=true

Now we will add some more dependencies i.e. material, flex and bootstrap.

Let’s add angular material using schematic way, where we don’t need to add anything in angular.json file.

ng add @angular/material

if above command did not work, use below command

npm install --save @angular/material @angular/cdk @angular/animations

Now as we have added dependencies manually so we need to specify the angular material theme in angular.json file.

"styles": [
"node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
]

Now let’s add flex layout with below command

npm i @angular/flex-layout

Now we will add bootstrap

npm i bootstrap

Let’s add it in angular.json file

"styles": [
"node_modules/bootstrap/scss/bootstrap.scss",
"node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
"src/styles.scss"
]

Now add below material modules in app.module.ts file

import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu'
import { MatDialogModule } from '@angular/material/dialog';

Let’s create a folder named as layouts in app folder.

Now create a component named as side-main-nav using below command

ng g c side-main-nav

Now create a folder named as ui, inside side-main-nav component folder. Inside that folder create a new component named as menu-list-item using below command

ng g c menu-list-item

Now create a new folder named as model at the same level, and create menu.ts file inside it. In this file we will add the menu items or if you want to get the dynamic menu item list then don’t create this file and use the data from DB in the same form as the data in this file.

In above file we can see we have used nav-item file, let’s create it in model folder.

Now create a service to handle current URL. Create this service in ui folder.

Now let’s add the code in menu-list-item component. Let start with menu-list-item.ts file

Now the HTML file

Now SCSS file

We are done with the item list, we will use this component in side-main-nav component.

So let’s start working on side-main-nav component

Now the HTML file

Now the SCSS

Let’s add some common css to our style.scss file

At many places I have used variables i.e. var(), to use them, let’s create a variable.scss file under css folder in assets folder.

Add it in angular.json file as we have added bootstrap in style array.

Now we will add the main routing, where we will add the sidenavbar component.

In above gist at line number 15 we can see

component: SideMainNavComponent

It will call the navigation bar to the admin module. For the Auth module we have not used any component, so there will be no navigation.

Now just add component SideMainNavComponent in the routing.

Here I am not showing the rest of the feature component, for that I will add the github link of the complete project where complete code is available.

Conclusion

So finally we achieve responsive side navbar using angular material. Here is the github link, please go through it if you need complete code.

Feel free to comment your thought or doubts.