Menggunakan Angular Material Sidenav

Untuk dokumentasi lengkap, lihat di https://material.angular.io/components/sidenav/overview

Buka file sidenav.component.html, lalu gunakan code dibawah.

<mat-drawer-container class="app-sidenav-container" autosize>
    <mat-drawer #drawer class="app-sidenav" mode="side">
      <p>Auto-resizing sidenav</p>
    </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>

Buka file sidenav.component.scss, lalu tambahkan css code berikut

.app-sidenav-container {
    flex: 1;
    width: 100%;
    min-width: 100%;

    height: 100%;
    min-height: 100%;
  }
  
  .app-sidenav-content {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
  
  .app-sidenav {
    width: 240px;
  }

Jika kita test, aplikasi kurang lebih sudah mulai terbentuk.

Pada modul selanjutnya kita akan mulai membuat content untuk masing-masing component.