Menambahkan Responsive Pada Sidenav

by

Untuk dokumentasi Sidenav Properties dan API, silakan buka di: https://material.angular.io/components/sidenav/api

Pada modul ini akan digunakan Properties opened, berguna untuk mengatur default sidenav ketika diload, apakah dalam posisi terbuka atau tertutup.

Untuk mempercantik tampilan, kita bisa tambahkan shadow pada sidenav dengan menggunakan class mat-elevation-z10.

Buka file sidenav.component.html, lalu tambahkan property opened=”true” dan class mat-elevation-z10.

<mat-drawer-container class="app-sidenav-container" autosize>
    <!-- menambahkan API opened=true, sidenav secara default akan ditampilkan -->
    <mat-drawer #drawer class="app-sidenav mat-elevation-z10" mode="side" opened="true">
        <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 kita sudah mengatur behaviour dan mempercantik sidenav dengan property dan class.

SIlakan bereksperimen dengan property lainnya seperti mode. Pada tutorial digunakan side, mode lainnya adalah push dan over.

Menggunakan Binding

Setelah bereksperimen dengan property diatas, kita akan modifikasi agar property diatur sesuai dengan ukuran dari screen dengan menggunakan property binding.

<mat-drawer-container class="app-sidenav-container" autosize>
    <!-- menambahkan API opened=true, sidenav secara default akan ditampilkan -->
    <mat-drawer #drawer class="app-sidenav mat-elevation-z10" [mode]="isScreenSmall ? 'over' : 'side' " [opened]="!isScreenSmall">
        <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>

Kita akan gunakan Breakpoint observer untuk mendapatkan informasi media query.

Buka file sidenav.component.ts 

import { BreakpointObserver, BreakpointState } from '@angular/cdk/layout';
import { Component, OnInit } from '@angular/core';

const SMALL_WIDTH_BP = 720;


@Component({
  selector: 'app-sidenav',
  templateUrl: './sidenav.component.html',
  styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {
  public isScreenSmall! : boolean;

  constructor(private breakpointObs : BreakpointObserver) { }

  ngOnInit(): void {
    this.breakpointObs
    .observe([`(max-width: ${SMALL_WIDTH_BP}px)`])
    .subscribe((state: BreakpointState)=>{
      this.isScreenSmall = state.matches;
    });
  }

}

Jika Anda test dengan mengubah ukuran browser, maka property mode dan opened akan disesuaikan dengan ukuran browser.

Sharing is caring:

Leave a Comment