Menambahkan Button Pada Toolbar

Mari kita pindahkan button toggle dari sidenav ke toolbar.component.html.

Buka file sidenav.component.html, pindahkan code toggle kedalam <app-toolbar>

<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>
        <router-outlet></router-outlet>
        <!-- pindahkan button ke toolbar.component.html -->
        <!-- <button type="button" mat-button (click)="drawer.toggle()">
        Toggle sidenav
      </button> -->
    </div>
  
</mat-drawer-container>

Buka file toolbar.component.html, tambahkan button untuk melakukan toggle sidenav

<mat-toolbar color="primary">
    <!-- tambahkan button untuk toggle sidenav -->
    <button mat-button (click)="toggleSidenav.emit()">
        <mat-icon>menu</mat-icon>
    </button>
    <span>Contact Manager</span>
</mat-toolbar>

Buka file toolbar.component.ts, tambahkan code untuk handling click event.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {
  // handling click event emiter
  @Output() toggleSidenav = new EventEmitter<void>();

  constructor() { }

  ngOnInit(): void {
  }

}

Buka file toolbar.component.css, lalu tambahkan rule untuk mengatur button ditampilkan pada screen kecil.

$iconWidth : 56px;

.sidenav-toggle{
    display: none;

    padding: 0;
    margin: 8px;
    min-width: $iconWidth;

    @media (max-width: 720px) {
        display: flex ;
        align-items: center;
        justify-content: center;
    }

    mat-icon{
        font-size: 30px;
        height: $iconWidth;
        width: $iconWidth;
        line-height: $iconWidth;
        color: white;
    }
}

Sampai disini layout aplikasi sudah mulai berbentuk. Berikutnya kita akan memperbaiki layout untuk main-content.