angular - 在 Angular 中创建侧边栏导航时出错

Question

我正在尝试在 Angular 中创建仪表板。我正在使用角度材料包来创建它。

我的代码有效，但侧面导航有问题。如下图所示，当我单击按钮时，侧边菜单的宽度减小了。相反，我希望它适用于整个页面。谁能告诉我我哪里出错了

Code : Component.html

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav">
    <mat-toolbar color="primary"> Menu </mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">1</a>
      <a mat-list-item href="#">2</a>
      <a mat-list-item href="#">3</a>
    </mat-nav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Test Application</span>
    </mat-toolbar>
    <ng-content></ng-content>
  </mat-sidenav-content>
</mat-sidenav-container>

这是我的 ts 文件。

import { Component } from '@angular/core';

@Component({
  selector: 'app-main-nav',
  templateUrl: './main-nav.component.html',
  styleUrls: ['./main-nav.component.css']
})
export class MainNavComponent {


  constructor() {}

}