Angular Material sidenav always open on desktop

Question

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?

G. Tranter G. Tranter · Accepted Answer · 2019-08-13T13:57:10

All of this behavior is what you have coded. You've made the button conditional so that it will only show for handset media types. You've also set the drawer to be fixed open in 'side' mode if not a handset. And you placed the toolbar inside the sidenav not above it. Stop doing those things to get the behavior you want:

<mat-toolbar color="primary">
  <button
    type="button"
    aria-label="Toggle sidenav"
    mat-icon-button
    (click)="drawer.toggle()">
    <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
  </button>
  <span class="title">Site Information System</span>
</mat-toolbar>

<mat-sidenav-container class="sidenav-container" autosize>
  <mat-sidenav #drawer class="sidenav" fixedInViewport
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'">
    <mat-toolbar ><div class="menuTitle">Menu</div></mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="#">Dashboard</a>
      <a mat-list-item href="#">Wilton 10 QI</a>
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <!-- Add Content Here -->
  </mat-sidenav-content>
</mat-sidenav-container>

Angular Material sidenav always open on desktop

2 Answers