Angular 7 Material PWA Files https://github.com/mlabieniec/AngularMaterialPWA

app.component.html

<div class="container">
  <mat-sidenav-container 
    fullscreen
    [hasBackdrop]="mobileQuery.matches">
    <mat-sidenav #lnav
      mode="over" 
      class="sidenav">
      <div class="content"> 
        <mat-list>
          <mat-list-item *ngFor="let route of nav">
            <a mat-button routerLink="{{route.path}}" routerLinkActive="active" (click)="toggleMobileNav(lnav)">{{route.title}}</a>
          </mat-list-item>
        </mat-list>
      </div>
    </mat-sidenav>
    <mat-sidenav-content class="sidenav-content">
      <mat-toolbar 
        class="toolbar" 
        [class.app-is-mobile]="mobileQuery.matches" 
        color="primary">
        <button 
          mat-icon-button 
          (click)="lnav.toggle()" 
          *ngIf="mobileQuery.matches">
          <mat-icon>menu</mat-icon>
        </button>
        {{title}}
        <div class="fill-space"></div>
        <span whoami></span>
      </mat-toolbar>
        <mat-drawer-container class="sidenav-container">
          <mat-drawer 
            mode="side" 
            [opened]="!mobileQuery.matches">
            <div class="content">
              <mat-list>
                <mat-list-item *ngFor="let route of nav">
                  <a mat-button routerLink="{{route.path}}" routerLinkActive="active" (click)="toggleMobileNav(lnav)">{{route.title}}</a>
                </mat-list-item>
              </mat-list>
            </div>
          </mat-drawer>
          <mat-drawer-content>
              <div class="content">
                <router-outlet></router-outlet>
              </div>
          </mat-drawer-content>
        </mat-drawer-container>
    </mat-sidenav-content>
  </mat-sidenav-container>
</div>

app.component.ts

import { 
  Component, 
  ChangeDetectorRef, 
  EventEmitter, 
  Output } from '@angular/core';
import { MediaMatcher } from '@angular/cdk/layout';
import { MatSidenav } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Material PWA';
  mobileQuery: MediaQueryList;
  nav = [
    {
      'title': 'Home',
      'path': '/'
    },
    {
      'title': 'My Account (Part 2)',
      'path': '/auth'
    }
  ];
  private _mobileQueryListener: () => void;
  @Output() toggleSideNav = new EventEmitter();
  
  constructor( changeDetectorRef: ChangeDetectorRef, media: MediaMatcher ) {
    this.mobileQuery = media.matchMedia('(max-width: 600px)');
    this._mobileQueryListener = () => changeDetectorRef.detectChanges();
    this.mobileQuery.addListener(this._mobileQueryListener);
  }
  
  toggleMobileNav(nav: MatSidenav) {
    if (this.mobileQuery.matches) {
      nav.toggle();
    }
  }
}

material.module.ts

import { NgModule } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import {
  MatAutocompleteModule,
  MatBadgeModule,
  MatBottomSheetModule,
  MatButtonModule,
  MatButtonToggleModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDatepickerModule,
  MatDialogModule,
  MatDividerModule,
  MatExpansionModule,
  MatGridListModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatNativeDateModule,
  MatPaginatorModule,
  MatProgressBarModule,
  MatProgressSpinnerModule,
  MatRadioModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSliderModule,
  MatSlideToggleModule,
  MatSnackBarModule,
  MatSortModule,
  MatStepperModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatTooltipModule,
  MatTreeModule,
} from '@angular/material';
@NgModule({
  exports: [
    CdkTableModule,
    CdkTreeModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
  ]
})
export class MaterialModule { }

sign-in.component.html

<form [formGroup]="signinForm">
  <mat-form-field>
      <input matInput placeholder="Email" type="email" formControlName="email" [errorStateMatcher]="errorStateMatcher" required>
      <mat-hint *ngIf="!emailInput.value">Enter your email address</mat-hint>
      <mat-error *ngIf="!emailInput.valid">
          {{getEmailInputError()}}
      </mat-error>
  </mat-form-field>
  <mat-form-field>
      <input matInput placeholder="Password" [type]="hide ? 'password' : 'text'" formControlName="password" [errorStateMatcher]="errorStateMatcher" required>
      <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon>
      <mat-hint *ngIf="!passwordInput.value">Enter your password</mat-hint>
      <mat-error *ngIf="!passwordInput.valid">
          {{getPasswordInputError()}}
      </mat-error>
  </mat-form-field>
  <button mat-raised-button color="primary">Sign In</button>
</form>

sign-in.component.ts

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-sign-in',
  templateUrl: './sign-in.component.html',
  styleUrls: ['./sign-in.component.scss']
})
export class SignInComponent {
  
  signinForm: FormGroup = new FormGroup({
    email: new FormControl('',[ Validators.email, Validators.required ]),
    password: new FormControl('', [ Validators.required ])
  });
  
  hide = true;

  get emailInput() { return this.signinForm.get('email'); }
  get passwordInput() { return this.signinForm.get('password'); }

  constructor() { }

  getEmailInputError() {
    if (this.emailInput.hasError('email')) {
      return 'Please enter a valid email address.';
    }
    if (this.emailInput.hasError('required')) {
      return 'An Email is required.';
    }
  }

  getPasswordInputError() {
    if (this.passwordInput.hasError('required')) {
      return 'A password is required.';
    }
  }

}

styles.scss

@import '~@angular/material/theming';

// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$app-primary: mat-palette($mat-indigo, 800);
$app-accent:  mat-palette($mat-pink, 800);
$app-active: mat-palette($mat-pink, 800);

// The warn palette is optional (defaults to red).
$app-warn:    mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($app-theme);

.active {
    color: mat-color($app-primary);
}
.valid, .primary {
    color: mat-color($app-primary);
}



html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
form {
    width: 100%;
}

form > * {
    margin-bottom: 1.5em;
    width: 100%;
}

a {
    color: mat-color($app-accent);
}

.content {
    padding: 0.5em;
}

.sidenav-content {
    flex-direction: column;
}

.sidenav-container {
    height: 90%;
}

.app-content {
    flex: 1;
    margin: 0 auto;
    padding: 2em;
}

.cursor-pointer {
    cursor: pointer;
}

.full-width {
    width: 100%;
}

.active {
    color: mat-color($app-active);
}