app.component.html

<mat-toolbar class="mat-elevation-z2 navbar">
  <button mat-icon-button (click)="toggleMenu()" class="menu-btn">
    <mat-icon>menu</mat-icon>
  </button>
  <a routerLink="/" class="logo">
    <app-logo class="logo-icon"></app-logo>
  </a>
  <div class="title-container">
    <div class="tag-line">
      <div class="tag-title">
        {{ title || defaultTitle }}
      </div>
      <div class="tag-subtitle" *ngIf="subtitle">
        {{ subtitle }}
      </div>
    </div>
    <div class="dummy"></div>
  </div>
  <span class="spacer"></span>
</mat-toolbar>
<mat-sidenav-container class="sidenav-container">
  <mat-sidenav mode="side" opened class="sidenav" [style.width]="sidenavWidth">
    <app-sidenav-buttons></app-sidenav-buttons>
  </mat-sidenav>
  <mat-sidenav-content class="content" [style.margin-left]="sidenavWidth">
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>