shadow1349/main.component.html

## main.component.html
<div class="main-container">
  <!-- SIDENAV CONTAINER -->
  <mat-sidenav-container class="sidenav-container" *ngIf="user | async as User">
    <!-- SIDENAV -->
    <mat-sidenav
      #mainSidenav
      class="sidenav-shadow"
      [opened]="windowWidth > breakWidth"
      [mode]="windowWidth >= breakWidth ? 'side' : 'over'"
      position="start"
      [fixedInViewport]="windowWidth > breakWidth"
    >
      <mat-toolbar color="primary">
        <span>{{ User.FirstName }} {{ User.LastName }}</span>
      </mat-toolbar>

      <mat-nav-list>
        <mat-list-item [routerLink]="['/main/notes']">
          <mat-icon color="accent">note</mat-icon>
          <h3>Notes</h3>
        </mat-list-item>
        <mat-list-item [routerLink]="['/main/profile']">
          <mat-icon color="accent">account_circle</mat-icon>
          <h3>Profile</h3>
        </mat-list-item>
      </mat-nav-list>
    </mat-sidenav>
    <!-- ./SIDENAV -->

    <!-- CONTENT -->
    <mat-sidenav-content>
      <!-- PRIMARY TOOLBAR -->
      <mat-toolbar color="primary">
        <button
          *ngIf="windowWidth < breakWidth"
          mat-icon-button
          (click)="mainSidenav.toggle()"
        >
          <mat-icon>menu</mat-icon>
        </button>
        <span>Note App</span>
        <span flex></span>
        <button mat-icon-button color="accent" (click)="signOut()">
          <mat-icon>exit_to_app</mat-icon>
        </button>
      </mat-toolbar>
      <!-- ./PRIMARY TOOLBAR -->

      <!-- MAIN CONTENT -->
      <div class="md-padding">
        <router-outlet></router-outlet>
      </div>
      <!-- ./MAIN CONTENT -->
    </mat-sidenav-content>
    <!-- ./CONTENT -->
  </mat-sidenav-container>
  <!-- ./SIDENAV CONTAINER -->
</div>

## main.component.scss
.main-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.is-mobile .toolbar {
  position: fixed;
  /* Make sure the toolbar will stay on top of the content as it scrolls past. */
  z-index: 2;
}

.sidenav-container {
  /* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
                causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
  flex: 1;
}

.is-mobile .sidenav-container {
  /* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
                `<body>` to be our scrolling element for mobile layouts. */
  flex: 1 0 auto;
}

## main.component.ts
import { Component, HostListener, OnInit } from '@angular/core';
import { IUser } from 'firebasenoteapptypes';
import { Observable } from 'rxjs';
import { AuthService, UserService } from '../services';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  windowWidth = window.innerWidth;
  breakWidth = 800;

  user: Observable<IUser>;

  constructor(private userService: UserService, private auth: AuthService) {
    this.user = this.userService.user;
  }

  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.windowWidth = window.innerWidth;
  }

  ngOnInit() {}

  signOut() {
    this.auth.signOut();
  }
}
	<div class="main-container">
	<!-- SIDENAV CONTAINER -->
	<mat-sidenav-container class="sidenav-container" *ngIf="user \| async as User">
	<!-- SIDENAV -->
	<mat-sidenav
	#mainSidenav
	class="sidenav-shadow"
	[opened]="windowWidth > breakWidth"
	[mode]="windowWidth >= breakWidth ? 'side' : 'over'"
	position="start"
	[fixedInViewport]="windowWidth > breakWidth"
	>
	<mat-toolbar color="primary">
	<span>{{ User.FirstName }} {{ User.LastName }}</span>
	</mat-toolbar>

	<mat-nav-list>
	<mat-list-item [routerLink]="['/main/notes']">
	<mat-icon color="accent">note</mat-icon>
	<h3>Notes</h3>
	</mat-list-item>
	<mat-list-item [routerLink]="['/main/profile']">
	<mat-icon color="accent">account_circle</mat-icon>
	<h3>Profile</h3>
	</mat-list-item>
	</mat-nav-list>
	</mat-sidenav>
	<!-- ./SIDENAV -->

	<!-- CONTENT -->
	<mat-sidenav-content>
	<!-- PRIMARY TOOLBAR -->
	<mat-toolbar color="primary">
	<button
	*ngIf="windowWidth < breakWidth"
	mat-icon-button
	(click)="mainSidenav.toggle()"
	>
	<mat-icon>menu</mat-icon>
	</button>
	<span>Note App</span>
	<span flex></span>
	<button mat-icon-button color="accent" (click)="signOut()">
	<mat-icon>exit_to_app</mat-icon>
	</button>
	</mat-toolbar>
	<!-- ./PRIMARY TOOLBAR -->

	<!-- MAIN CONTENT -->
	<div class="md-padding">
	<router-outlet></router-outlet>
	</div>
	<!-- ./MAIN CONTENT -->
	</mat-sidenav-content>
	<!-- ./CONTENT -->
	</mat-sidenav-container>
	<!-- ./SIDENAV CONTAINER -->
	</div>
	.main-container {
	display: flex;
	flex-direction: column;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	.is-mobile .toolbar {
	position: fixed;
	/* Make sure the toolbar will stay on top of the content as it scrolls past. */
	z-index: 2;
	}

	.sidenav-container {
	/* When the sidenav is not fixed, stretch the sidenav container to fill the available space. This
	causes `<mat-sidenav-content>` to act as our scrolling element for desktop layouts. */
	flex: 1;
	}

	.is-mobile .sidenav-container {
	/* When the sidenav is fixed, don't constrain the height of the sidenav container. This allows the
	`<body>` to be our scrolling element for mobile layouts. */
	flex: 1 0 auto;
	}
	import { Component, HostListener, OnInit } from '@angular/core';
	import { IUser } from 'firebasenoteapptypes';
	import { Observable } from 'rxjs';
	import { AuthService, UserService } from '../services';

	@Component({
	selector: 'app-main',
	templateUrl: './main.component.html',
	styleUrls: ['./main.component.scss']
	})
	export class MainComponent implements OnInit {
	windowWidth = window.innerWidth;
	breakWidth = 800;

	user: Observable<IUser>;

	constructor(private userService: UserService, private auth: AuthService) {
	this.user = this.userService.user;
	}

	@HostListener('window:resize', ['$event'])
	onResize(event) {
	this.windowWidth = window.innerWidth;
	}

	ngOnInit() {}

	signOut() {
	this.auth.signOut();
	}
	}