Styling Applications with Angular Material - Removed Sidenav Docs Sample

sidenav.component.html

<mat-sidenav-container class="example-container">
  <mat-sidenav #sidenav class="example-sidenav">
    Jolly good!
  </mat-sidenav>

  <div class="example-sidenav-content">
    <button type="button" mat-button (click)="sidenav.open()">
      Open sidenav
    </button>
  </div>

</mat-sidenav-container>

sidenav.component.scss

.example-container {
  width: 500px;
  height: 300px;
  border: 1px solid rgba(0, 0, 0, 0.5);
}

.example-sidenav-content {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.example-sidenav {
  padding: 20px;
}