Styling Sidenav dengan Menggunakan Toolbar dan List

KIta akan menambahkan Angular Material Component pada Sidenav, yaitu Toolbar dan List. Untuk dokumentasi lengkap kunjungi link berikut:

• Angular Material Toolbar Component
• Angular Material List Component

Buka file sidenav.component.html, lalu tambahkan code toolbar dan list:

<mat-drawer-container class="app-sidenav-container" autosize>
    <mat-drawer #drawer class="app-sidenav" mode="side">
        <mat-toolbar color="primary">
            <span>My Application</span>
        </mat-toolbar>
        <mat-list role="list">
            <mat-list-item role="listitem">Item 1</mat-list-item>
            <mat-list-item role="listitem">Item 2</mat-list-item>
            <mat-list-item role="listitem">Item 3</mat-list-item>
          </mat-list>        
    </mat-drawer>
  
    <div class="app-sidenav-content">
        <app-toolbar></app-toolbar>
        <router-outlet></router-outlet>
      <button type="button" mat-button (click)="drawer.toggle()">
        Toggle sidenav
      </button>
    </div>
  
</mat-drawer-container>

Sampai disini sidenav sudah makin terlihat bentuknya.