Ошибка при создании боковой панели навигации в 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() {}

}