How to implement Sidenav, Header & Footer in angular material?

I'm trying to use a classic Header, Footer & Sidebar navigation in Angular with Angular Material. However, I'm getting issues with setting the height causing multiple scroll issues in the viewport.

I'm attaching the layout for reference. I'm using an inner sidenav inside the sidenav-content of the parent sidenav.

:host { display: flex; flex-direction: column; height: 100%; } .mat-elevation-z6 { z-index: 9; } .mtsMainContainer { height: 100%; .mtsMainNav { box-shadow: 1px 1px 10px 1px lightgray; } .mtsMainContent { height: 100%; .mtsSubContainer { height: 100%; .mtsSubNav { width: 300px; .dvSubNavHeader { position: sticky; top: 0; z-index: 1; background: white; padding: 20px; .dvCloseSubNav { background: #f2f2f2; padding: 5px; span { cursor: pointer; vertical-align: middle; } } } } .mtsSubContent { padding: 20px; } } } }

<app-header></app-header> <mat-sidenav-container> <mat-sidenav #sidenav mode="side" opened> <app-sidenav-contents></app-sidenav-contents> </mat-sidenav> <mat-sidenav-content> <mat-sidenav-container> <mat-sidenav #subnav mode="side"> <div> <div> <span (click)="subnav.toggle()"> <mat-icon>keyboard_arrow_left</mat-icon> <b>{{transactionHeader || 'Transactions'}}</b> </span> </div> </div> <app-transactions-bar></app-transactions-bar> </mat-sidenav> <mat-sidenav-content> <app-bread-crumb></app-bread-crumb> <router-outlet></router-outlet> </mat-sidenav-content> </mat-sidenav-container> </mat-sidenav-content> </mat-sidenav-container> <app-scroll-top></app-scroll-top> <app-footer></app-footer>

2 Answers

You can use mat-toolbar for header and footer. mat-sidenav-container to display sidenav and content.

For header:

<mat-toolbar color="primary"> <mat-toolbar-row> <img src=""> <!-- Add your logo if available--> <mat-icon (click)="sidenav.toggle()">menu</mat-icon> </mat-toolbar-row> </mat-toolbar> 

For sideNav use mat-sidenav-container:

<mat-sidenav-container> <!-- This is your sidenav --> <mat-sidenav #sidenav [opened]="true" [mode]="'side'"> <mat-nav-list> <a mat-list-item [routerLink]="'/provideLink'" routerLinkActive="active-list-item"> Nav1 </a> <a mat-list-item [routerLink]="'/provideLink'" routerLinkActive="active-list-item"> Nav2 </a> </mat-nav-list> </mat-sidenav> <!-- Content or body of your page--> <mat-sidenav-content> <div> <router-outlet></router-outlet> </div> </mat-sidenav-content> </mat-sidenav-container> 

For footer add another mat-toolbar:

<mat-toolbar color="primary"> <mat-toolbar-row></mat-toolbar-row> </mat-toolbar> 

This is basic page layout. You can add styles & icons, change colors as required.

Import all the material module in your root module or in the module you are working on and then implement it like below,

<mat-sidenav-container fullscreen> <mat-sidenav #sidenav> <mat-list> <mat-list-item [routerLink]="['/']"> Foo</mat-list-item> <mat-list-item [routerLink]="['/bar']"> Bar</mat-list-item> </mat-list> </mat-sidenav> <mat-toolbar color="primary" #toolbar> <button type="button" mat-icon-button (click)="sidenav.open()" title="Open sidenav"> <mat-icon>menu</mat-icon> </button> This is my Toolbar </mat-toolbar> <div #main> <router-outlet></router-outlet> </div> <div #footer> Your sticky footer with a variable height. </div> </mat-sidenav-container> 

For the full implementation follow this stackblitz link