app.component.html
using the mat-sidenav-container component

<app-layout>
  <mat-sidenav-container>
    <mat-sidenav #sidenav role="navigation">
      <!--this is a place for us to add side-nav code-->
    </mat-sidenav>
    <mat-sidenav-content>
      <!--in here all the content must reside. We will add a navigation header as well-->
      <main>
        <router-outlet></router-outlet>
      </main>
    </mat-sidenav-content>
  </mat-sidenav-container>
</app-layout>

We create a container for a side navigation bar and specify the part for our content. As you can see the <mat-sidenav> element defines a place for a side navigation and the <mat-sidenav-content>element defines a place for our content. We need to use the local reference #sidenav

Register the module in the material.module.ts file:

import { MatTabsModule, MatSidenavModule } from '@angular/material';
 
@NgModule({
  imports: [
    CommonModule,
    MatTabsModule,
    MatSidenavModule
  ],
  exports: [
    MatTabsModule,
    MatSidenavModule
  ],

app.component.css file:

mat-sidenav-container, mat-sidenav-content, mat-sidenav {
    height: 100%;
}
 
mat-sidenav {
    width: 250px;
}
 
main {
    padding: 10px;
}

----
styles.css

/* for sidenav to take a whole page */
html, body { 
    margin: 0;
    height: 100%;
}