refactor(ToolbarComponent): to resolve layout issue with sidenav

Author: Only1MrAnderson

src/app/app.component.html

@@ -1,8 +1,17 @@
 <div class="app-fullpage">
   <header>
-    <app-toolbar></app-toolbar>
+    <app-toolbar (navToggle)="sidenav.toggle()"></app-toolbar>
   </header>
   <main class="app-content">
-    <router-outlet></router-outlet>
+    <mat-sidenav-container>
+      <mat-sidenav #sidenav role="navigation">
+        <mat-nav-list (click)="sidenav.toggle()">
+          <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
+            {{menu.title}}
+          </a>
+        </mat-nav-list>
+      </mat-sidenav>
+      <router-outlet></router-outlet>
+    </mat-sidenav-container>
   </main>
 </div>

src/app/app.component.scss

@@ -17,3 +17,13 @@
   display: flex;
   flex-direction: column;
 }
+
+mat-sidenav-container {
+  flex: 1 1 auto;
+  width: 100%;
+  height: calc(100vh - 64px);
+}
+
+mat-sidenav {
+  width: 200px;
+}

src/app/app.component.spec.ts

@@ -3,6 +3,7 @@ import { RouterTestingModule } from "@angular/router/testing";
 import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
 import { AppComponent } from "./app.component";
 import { ToolbarModule } from "./toolbar/toolbar.module";
+import { MatSidenavModule } from "@angular/material";
 
 describe("AppComponent", () => {
   let component: AppComponent;
@@ -11,7 +12,12 @@ describe("AppComponent", () => {
   beforeEach(
     async(() => {
       TestBed.configureTestingModule({
-        imports: [RouterTestingModule, BrowserAnimationsModule, ToolbarModule],
+        imports: [
+          RouterTestingModule,
+          BrowserAnimationsModule,
+          ToolbarModule,
+          MatSidenavModule
+        ],
         declarations: [AppComponent]
       }).compileComponents();
     })

src/app/app.component.ts

@@ -1,8 +1,37 @@
 import { Component } from "@angular/core";
 
+interface Menu {
+  title: string;
+  link: string;
+  options: { exact: boolean };
+}
+
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.scss"]
 })
-export class AppComponent {}
+export class AppComponent {
+  menus: Menu[] = [
+    {
+      title: "Home",
+      link: "/",
+      options: { exact: true }
+    },
+    {
+      title: "Operators",
+      link: "/operators",
+      options: { exact: false }
+    },
+    {
+      title: "Companies",
+      link: "/companies",
+      options: { exact: false }
+    },
+    {
+      title: "Team",
+      link: "/team",
+      options: { exact: false }
+    }
+  ];
+}

src/app/app.module.ts

@@ -6,13 +6,16 @@ import { RouterModule, PreloadAllModules } from "@angular/router";
 import { AppComponent } from "./app.component";
 import { RXJS_DOC_ROUTES } from "./app.routing";
 import { ToolbarModule } from "./toolbar/toolbar.module";
+import { MatSidenavModule, MatListModule } from "@angular/material";
 
 @NgModule({
   declarations: [AppComponent],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     ToolbarModule,
+    MatListModule,
+    MatSidenavModule,
     RouterModule.forRoot(RXJS_DOC_ROUTES, {
       preloadingStrategy: PreloadAllModules
     })

src/app/companies/companies.component.html

@@ -1,3 +1 @@
-<p>
-  companies works!
-</p>
+

src/app/companies/companies.component.ts

@@ -1,15 +1,12 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit } from "@angular/core";
 
 @Component({
-  selector: 'app-companies',
-  templateUrl: './companies.component.html',
-  styleUrls: ['./companies.component.scss']
+  selector: "app-companies",
+  templateUrl: "./companies.component.html",
+  styleUrls: ["./companies.component.scss"]
 })
 export class CompaniesComponent implements OnInit {
+  constructor() {}
 
-  constructor() { }
-
-  ngOnInit() {
-  }
+  ngOnInit() {}
 }
-

src/app/companies/companies.module.ts

@@ -3,6 +3,7 @@ import { NgModule } from "@angular/core";
 import { CompaniesComponent } from "./companies.component";
 import { routing } from "./companies.routing";
 import { SharedModule } from "../shared.module";
+import { environment } from "../../environments/environment";
 
 @NgModule({
   imports: [routing, SharedModule],

src/app/toolbar/toolbar.component.html

@@ -1,23 +1,13 @@
 <mat-toolbar color="accent" class="mat-elevation-z6">
-  <button mat-icon-button (click)="sidenav.toggle()" aria-label="menu">
+  <button mat-icon-button (click)="navOpen()" aria-label="menu">
     <mat-icon>
       menu
     </mat-icon>
   </button>
   <span class="title" fxFlex> RxJS Docs </span>
-
   <a aria-label="GitHub Repository" class="mat-button" href="https://github.com/ReactiveX" aria-disabled="false">
     <span class="mat-button-wrapper">
       <img src="../../../assets/img/GitHub-Mark-Light-64px.png"> GitHub
     </span>
   </a>
 </mat-toolbar>
-<mat-sidenav-container>
-  <mat-sidenav #sidenav role="navigation">
-    <mat-nav-list (click)="sidenav.toggle()">
-      <a *ngFor="let menu of menus" mat-list-item routerLinkActive="active" [routerLinkActiveOptions]="menu.options" [routerLink]="menu.link">
-        {{menu.title}}
-      </a>
-    </mat-nav-list>
-  </mat-sidenav>
-</mat-sidenav-container>

src/app/toolbar/toolbar.component.scss

@@ -6,13 +6,3 @@ img {
   padding: 0 16px;
   font-weight: 600;
 }
-
-mat-sidenav-container {
-  flex: 1 1 auto;
-  width: 100%;
-  height: calc(100vh - 64px);
-}
-
-mat-sidenav {
-  width: 200px;
-}