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

Question

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 class="mat-elevation-z6"></app-header>
<mat-sidenav-container class="mtsMainContainer">
    <mat-sidenav class="mtsMainNav" #sidenav mode="side" opened>
        <app-sidenav-contents></app-sidenav-contents>
    </mat-sidenav>
    <mat-sidenav-content class="mtsMainContent">
        <mat-sidenav-container class="mtsSubContainer">
            <mat-sidenav class="mtsSubNav" #subnav mode="side">
                <div class="dvSubNavHeader">
                    <div class="dvCloseSubNav">
                        <span (click)="subnav.toggle()">
                            <mat-icon style="vertical-align: middle;">keyboard_arrow_left</mat-icon>
                            <b>{{transactionHeader || 'Transactions'}}</b>
                        </span>
                    </div>
                </div>
                <app-transactions-bar></app-transactions-bar>
            </mat-sidenav>
            <mat-sidenav-content class="mtsSubContent">
                <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>

Answer 1

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 style="width: 15%" #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 style="height: 90vh">
          <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.

Answer 2

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 class="sw-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 class="content" #main>
      <router-outlet></router-outlet>
    </div>

    <div class="footer" #footer>
      Your sticky footer with a variable height.
    </div>
  
  
</mat-sidenav-container>

For the full implementation follow this stackblitz link