app.component.html

<mat-sidenav-container fullscreen>

  <mat-sidenav #start (click)="start.close()">
    <mat-nav-list>

      <a mat-list-item routerLink="/">
        <mat-icon>library_books</mat-icon>
        <span>Courses</span>
      </a>

      <a mat-list-item routerLink="/search-lessons">
        <mat-icon>search</mat-icon>
        <span>Search Lessons</span>
      </a>

      <a mat-list-item routerLink="about">
        <mat-icon>question_answer</mat-icon>
        <span>About</span>
      </a>
      <a mat-list-item>
        <mat-icon>person_add</mat-icon>
        <span>Register</span>
      </a>

      <a mat-list-item routerLink="login">
        <mat-icon>account_circle</mat-icon>
        <span>Login</span>
      </a>

      <a mat-list-item (click)="logout()">
        <mat-icon>exit_to_app</mat-icon>
        <span>Logout</span>
      </a>

    </mat-nav-list>

  </mat-sidenav>

  <mat-toolbar color="primary">

    <div class="toolbar-tools">

      <button mat-icon-button (click)="start.open('mouse')">
        <mat-icon>menu</mat-icon>
      </button>

      <div class="filler"></div>

    </div>


  </mat-toolbar>

  <loading></loading>

  <router-outlet></router-outlet>

</mat-sidenav-container>