So for anyone who stumbles upon this problem. I solved it by removing the breakpoint syntax.

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport>
      <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="actions">Action List</a>
      <a mat-list-item href="synopsis"> Synopsis</a>
      <a mat-list-item href="#">Link 3</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()">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span><i class="fab fa-fort-awesome-alt fa-3x">Dnd 5e Reference Site</i></span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <div class="jumbotron-fluid">
    <app-homepage></app-homepage>
  </div>
  </mat-sidenav-content>
</mat-sidenav-container>

Just getting my feet wet in JS/TS/CSS/HTML/Angular6 and I’m trying to make a fairly basic web app. I created an angular app and tried to make a header using the prebuilt navigation schematic. It took me a while, but I realized that the side-nav menu wasn’t supposed to just sit open, and was supposed to be closable.

I noted where in the HTML I can open/close the menu:

[opened]="(isHandset$ | async) === false">

But there is a built in toggle button that I think is supposed to stay exposed when you set that value to true. I didn’t change in the schematic except adding a router to my content where indicated in the schematic so I dont think that’s causing the issue, and I’m very new to JS/HTML so I’m not sure why this isn’t working out of the box.

The HTML (header.component.html):

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav #drawer class="sidenav" fixedInViewport
      [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
      [mode]="(isHandset$ | async) ? 'over' : 'side'"
      [opened]="(isHandset$ | async) === true">
      <mat-toolbar>Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item href="actions">Action List</a>
      <a mat-list-item href="#">Link 2</a>
      <a mat-list-item href="#">Link 3</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>Dnd 5e Reference Site</span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <app-homepage></app-homepage>
  </mat-sidenav-content>
</mat-sidenav-container>

The TS (header.component.ts):

import { Component } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { Observable } from 'rxjs';
import { map, shareReplay } from 'rxjs/operators';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.scss']
})
export class HeaderComponent {

  isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
    .pipe(
      map(result => result.matches),
      shareReplay()
    );

  constructor(private breakpointObserver: BreakpointObserver) {}

}

The scss file (header.component.scss):

.sidenav-container {
  height: 100%;
}

.sidenav {
  width: 200px;
}

.sidenav .mat-toolbar {
  background: inherit;
}

.mat-toolbar.mat-primary {
  position: sticky;
  top: 0;
  z-index: 1;
}

Image of what the app looks like with the menu closed. Note, I believe there should be a menu button in the top left or top right corner that opens the menu while it is closed.

Web app home page when [Opened] = “true”

If anyone could explain what the issue is with the schematic that would be great. Furthermore, if anyone has any resources they recommend for exercises on Observables or using ng tags in angular, I would very much appreciate it.

Thanks!