Why does the sidenav only appear in the header in angular?

Why does the sidenav only appear in the header?

I have no idea what's wrong. app.component.html:

<mat-sidenav-container>
  <mat-sidenav #sidenav role="navigation">
    <app-sidenav-list (closeSidenav)="sidenav.close()"></app-sidenav-list>
  </mat-sidenav>
  <mat-sidenav-content>
    <app-header (sidenavToggle)="sidenav.toggle()"></app-header>
    <main>
      <router-outlet></router-outlet>
    </main>
  </mat-sidenav-content>
</mat-sidenav-container>

header.component.html:

<mat-toolbar  color="primary">
    <div fxHide.gt-xs>
        <button mat-icon-button (click)="onToggleSidenav()">
          <mat-icon>menu</mat-icon>
        </button>
      </div>
</mat-toolbar>

and sidenav-list.component.html:

<mat-nav-list>
  <a mat-list-item routerLink="/signup" (click)="onClose()">
    <mat-icon>face</mat-icon>
    <span class="nav-caption">Signup</span>
  </a>
  <a mat-list-item routerLink="/login" (click)="onClose()">
    <mat-icon>input</mat-icon>
    <span class="nav-caption">Login</span>
  </a>
  <mat-list-item>
    <button mat-icon-button (click)="onClose()">
      <mat-icon>eject</mat-icon>
      <span class="nav-caption">Logout</span>
    </button>
  </mat-list-item>
</mat-nav-list>

Add the CSS height property in your app.component.css to the host and mat-sidenav-container. Can add to the body as well.

:host, body, .mat-sidenav-container { height: 100vh } 

Hope it helps. Happy coding!