Menggunakan Angular Material Card

Kita akan menambahkan card kedalam main-content.component.html.

Dokumentasi card dapat dilihat di https://material.angular.io/components/card/overview

Buka file main-content.component.html, lalu gunakan basic card dari dokumentasi diatas.

<mat-card>
    Main Content
</mat-card>

Kemudian kita atur margin untuk seluruh component dalam main-content. Pada tutorial digunakan penambahan css rule pada sidenav, bila Anda ingin menggunakan pendekatan lain, silakan bereksperimen.

Buka file sidenav.component.html, tambahkan div wrapper untuk <router-outlet>.

<mat-drawer-container class="app-sidenav-container" autosize>
    <mat-drawer #drawer class="app-sidenav mat-elevation-z10" [mode]="isScreenSmall ? 'over' : 'side' " [opened]="!isScreenSmall">
        <mat-toolbar color="primary">
            <span>Contact</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 (toggleSidenav)="drawer.toggle()"></app-toolbar>
        <div class="wrapper">
            <router-outlet></router-outlet>
        </div>
    </div>
  
</mat-drawer-container>

Kemudian buka file sidenav.component.scss, tambahkan class wrapper.

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

    height: 100%;
    min-height: 100%;
  }
  
  .app-sidenav-content {
    display: flex;
    height: 100%;

    flex-direction: column;
    
  }
  
  .app-sidenav {
    width: 240px;
  }
  
  .wrapper{
    margin: 40px;
  }