如何在angular中实现Sidenav，Header & Footer？

<!-- app.component.html -->
<mat-drawer-container>
  <mat-drawer mode="side" opened="true">
    <!-- Sidenav content -->
  </mat-drawer>
  <mat-drawer-content>
    <header>
      <!-- Header content -->
    </header>
    <main>
      <!-- Main content -->
    </main>
    <footer>
      <!-- Footer content -->
    </footer>
  </mat-drawer-content>
</mat-drawer-container>

// app.component.ts
import { Component, ViewChild } from '@angular/core';
import { MatSidenav } from '@angular/material/sidenav';

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

  toggleSidenav() {
    this.sidenav.toggle();
  }
}