如何根据屏幕宽度切换mat扩展面板？

<mat-sidenav-container>
  <mat-sidenav #sidenav mode="side">
    <!-- 扩展面板内容 -->
  </mat-sidenav>
  
  <mat-sidenav-content>
    <!-- 主内容 -->
  </mat-sidenav-content>
</mat-sidenav-container>

@media (max-width: 768px) {
  mat-sidenav {
    width: 0 !important;
  }
}

import { Component, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  @ViewChild('sidenav') sidenav: MatSidenav;

  constructor(private breakpointObserver: BreakpointObserver) {}

  ngOnInit() {
    this.breakpointObserver.observe([Breakpoints.Handset]).subscribe(result => {
      if (result.matches) {
        this.sidenav.close();
      }
    });
  }
}