To create a navigation header, we need to use the mat-toolbar element. But first thing first.

This component has its own module, so we need to register that module inside the material.module.ts file:

import { ..., MatToolbarModule } from '@angular/material';

imports: [
    MatToolbarModule,

exports: [
    MatToolbarModule,

-------
ng g component navigation/header --spec false

app.component.html

<mat-sidenav-content>
  <app-header></app-header>
  <main>
    <router-outlet></router-outlet>
  </main>
</mat-sidenav-content>

header.component.html

<mat-toolbar color="primary">
  <div fxHide.gt-xs>
      <button mat-icon-button (click)="onToggleSidenav()">
          <mat-icon>menu</mat-icon>
      </button>
  </div>
  <div>
      <a routerLink="/home">Owner-Account</a>
  </div>
  <div fxFlex fxLayout fxLayoutAlign="end" fxHide.xs>
      <ul fxLayout fxLayoutGap="15px" class="navigation-items">
          <li>
              <a routerLink="/owner">Owner Actions</a>
          </li>
          <li>
              <a routerLink="/account">Account Actions</a>
          </li>
      </ul>
  </div>
</mat-toolbar>

--------------------------
To continue, let’s register the MatIconModule and MatButtonModule inside the material module file:

import { ... MatIconModule, MatButtonModule } from '@angular/material';

imports: [
    MatButtonModule,
    MatIconModule,

exports: [
    MatButtonModule,
    MatIconModule,

----------------
modify the header.component.css file:

a {
    text-decoration: none;
    color: white;
}
 
a:hover, a:active{
    color: lightgray;
}
 
.navigation-items{
    list-style-type: none;
    padding: 0;
    margin: 0;
}
 
mat-toolbar{
    border-radius: 3px;
}
 
@media(max-width: 959px){
    mat-toolbar{
        border-radius: 0px;
    }
}

----------------
If we take a look at the icon button code, we can see the onToggleSidenav() event. We need to implement it inside the header.component.ts file:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 
@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {
 
  @Output() public sidenavToggle = new EventEmitter();
 
  constructor() { }
 
  ngOnInit() {
  }
 
  public onToggleSidenav = () => {
    this.sidenavToggle.emit();
  }
 
}

Finally, we have to react to this event emitter inside our app.component.html file:

<mat-sidenav-content>
  <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
  <main>
    <router-outlet></router-outlet>
  </main>
</mat-sidenav-content>

Now it is obvious why we need the #sidenav local reference inside the mat-sidenav component.