在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() {}

}