Angular Material sidenav always open on desktop

I am new to Angular and I am trying to apply the sidenar component from Angular Material (current version).

I have the following code within the main-nav component:

<mat-sidenav-container class="sidenav-container" autosize>
    <mat-sidenav #drawer class="sidenav" fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="(isHandset$ | async) === false">
  <mat-toolbar ><div class="menuTitle">Menu</div></mat-toolbar>
  <mat-nav-list>
    <a mat-list-item href="#">Dashboard</a>
    <a mat-list-item href="#">Screen2</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()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span class="title">Information System</span>
    </mat-toolbar>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

When I run the app the menu or the hamburger icon doesnt appear. If I shrink my browser down to mobile size the hamburger icon appears and I can access the side nav and toggle it on and off. If I then expand the browser the menu stays in place and I cannot toggle it.

How do I get the menu/hamburger icon to appear when I launch the app on a desktop screen?

As an extra can I get the side nav to appear below the toolbar?

Source: New feed
Source Url Angular Material sidenav always open on desktop