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

}