angular material progress bar example

Example 1: angular material toolbar with logo

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <button mat-icon-button>
      <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
    </button>
    <h1>SimpleCRM</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button [routerLink]="'/accounts'"> Accounts </a>
      <a mat-button [routerLink]="'/create-account'"> Create Account </a>
      <a mat-button [routerLink]="'/contacts'"> Contacts </a>
      <a mat-button [routerLink]="'/create-contact'"> Create Contact </a>
      <a mat-button [routerLink]="'/activities'"> Activities </a>
      <a mat-button [routerLink]="'/create-activity'"> Create Activity </a>

    </div>
  </mat-toolbar-row>

  <mat-toolbar-row>
      <span style="font-size: 12px;">SimpleCRM helps you easily manage your contacts</span>
    </mat-toolbar-row>
</mat-toolbar>

Example 2: angular material toolbar with logo

<mat-sidenav-container>
  <mat-sidenav #sidenav>
    <mat-nav-list>

      <a mat-list-item [routerLink]="'/accounts'"> Accounts </a>
      <a mat-list-item [routerLink]="'/create-account'"> Create Account </a>
      <a mat-list-item [routerLink]="'/contacts'"> Contacts </a>
      <a mat-list-item [routerLink]="'/create-contact'"> Create Contact </a>
      <a mat-list-item [routerLink]="'/activities'"> Activities </a>
      <a mat-list-item [routerLink]="'/create-activity'"> Create Activity </a>
      <a mat-list-item (click)="sidenav.toggle()" href="" mat-list-item>Close</a>

    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <div style="height: 88vh;">

      <router-outlet></router-outlet>
    </div>
  </mat-sidenav-content>
</mat-sidenav-container>