td script

Header with Side Nav

Scene 1: Setting Up the Container

<!-- main container -->
<mat-sidenav-container class="sidenav-container">
  <!-- sidebar  -->
  <mat-sidenav #sidenav mode="over" class="sidenav"></mat-sidenav>
  <!-- content of page -->
  <mat-sidenav-content></mat-sidenav-content>
</mat-sidenav-container>

mat-sidenav-container element acts as the main container that will hold both our sidebar and the content of the page. This container manages how the sidebar interacts with the main content.

Scene 2: Creating the Sidenav

<mat-sidenav #sidenav mode="over" class="sidenav">

Now, let's move on to the sidebar itself. We will use the element to define it.

This mat-sidenav tag creates the sidebar. The #sidenav is a template reference variable, allowing us to control the sidebar in our TypeScript code. We're setting the mode to over, meaning the sidebar will slide over the main content when opened. And of course, you can apply custom styles with the sidenav class.

Scene 3: Adding Toolbar and Close Button

<mat-toolbar>
  <button mat-icon-button (click)="sidenav.close()">
    <mat-icon>close</mat-icon>
  </button>
</mat-toolbar>

Inside the sidebar, we'll start with a toolbar that includes a close button. This makes it easy for users to close the sidebar.

The creates a header area, and inside it, we have a button with a mat-icon-button directive to style it as an icon button. The (click)="sidenav.close()" is an Angular event binding that closes the sidebar when the button is clicked. The element simply displays a close icon.