Added Togleable Sidebar

src/app/app-routing.module.ts

@@ -1,14 +1,15 @@
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {ThisEnvironment} from '../environments/environment.injectable';
-import {CountComponent} from './count/count.component';
-import {PrintComponent} from './print/print.component';
-import {SampleComponent} from './sample/sample.component';
-import {SettingsComponent} from './settings/settings.component';
-import {MultipleLabelsComponent} from './multiple-labels/multiple-labels.component';
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ThisEnvironment } from '../environments/environment.injectable';
+import { CountComponent } from './count/count.component';
+import { PrintComponent } from './print/print.component';
+import { SampleComponent } from './sample/sample.component';
+import { SettingsComponent } from './settings/settings.component';
+import { MultipleLabelsComponent } from './multiple-labels/multiple-labels.component';
 import { DepositsComponent } from './deposits/deposits.component';
 import { GraphsComponent } from './graphs/graphs.component';
-import { ImportedFilesComponent} from './imported-files/imported-files.component'
+import { ImportedFilesComponent } from './imported-files/imported-files.component'
+import { SidebarComponent } from './sidebar/sidebar.component';
 
 export const routes: Routes = [
   {
@@ -16,20 +17,23 @@ export const routes: Routes = [
     pathMatch: 'full',
     component: SampleComponent
   },
-  {
-    path: 'deposits',
-    pathMatch: 'full',
-    component: DepositsComponent
-  },
   {
     path: 'dashboard',
-    pathMatch: 'full',
-    component: GraphsComponent
-  },
-  {
-    path: 'imports',
-    pathMatch: 'full',
-    component: ImportedFilesComponent
+    component: SidebarComponent,
+    children: [
+      {
+        path: 'graphs', // child route path
+        component: GraphsComponent, // child route component that the router renders
+      },
+      {
+        path: 'imports',
+        component: ImportedFilesComponent
+      },
+      {
+        path: 'deposits',
+        component: DepositsComponent
+      },
+    ],
   },
   {
     path: 'sample',
@@ -68,7 +72,7 @@ export const routes: Routes = [
   ],
   exports: [RouterModule],
   providers: [
-    {provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment},
+    { provide: 'APP_ENVIRONMENT', useClass: ThisEnvironment },
   ]
 })
 export class AppRoutingModule {

src/app/app.module.ts

@@ -5,6 +5,7 @@ import {FlexLayoutModule} from '@angular/flex-layout';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSidenavModule} from '@angular/material/sidenav';
 import {MatCardModule} from '@angular/material/card';
 import {MatOptionModule} from '@angular/material/core';
 import {MAT_FORM_FIELD_DEFAULT_OPTIONS, MatFormFieldModule} from '@angular/material/form-field';
@@ -51,7 +52,8 @@ import { CustomDateAdapter } from './custom-date-adapter';
 import { MatTableModule } from '@angular/material/table'  
 import {MatGridListModule} from '@angular/material/grid-list';
 import {MatDividerModule} from '@angular/material/divider';
-
+import { SidebarComponent } from './sidebar/sidebar.component';
+import {MatListModule} from '@angular/material/list';
 
 
 
@@ -91,10 +93,13 @@ export function getBaseHref(platformLocation: PlatformLocation): string {
     SettingsComponent,
     DepositsComponent,
     GraphsComponent,
-    ImportedFilesComponent
+    ImportedFilesComponent,
+    SidebarComponent
   ],
   imports: [
     MatPaginatorModule,
+    MatListModule,
+    MatSidenavModule,
     MatDividerModule,
     MatGridListModule,
     MatTableModule,

src/app/graphs/graphs.component.html

@@ -176,9 +176,9 @@
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
-    <!-- <mat-paginator #paginator [length]="100000" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
+    <mat-paginator #paginator [length]="topBarData[0]" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions"
     (page)="updatePage($event)">
-  </mat-paginator>  -->
+  </mat-paginator> 
   </mat-card>
 
 </div>

src/app/navbar/navbar.component.html

@@ -4,6 +4,7 @@
     <button id="nav_location" mat-button routerLink="/settings">{{locationId === '0000' ? 'Click here to set location' : 'Location: ' + locationId}}</button>
     <span fxFlex></span>
     <button id="nav_home" mat-icon-button routerLink="/"><mat-icon>home</mat-icon></button>
+    <button id="nav_dash" mat-icon-button routerLink="/dashboard"><mat-icon>dashboard</mat-icon></button>
     <button id="nav_settings" mat-icon-button routerLink="/settings"><mat-icon>settings</mat-icon></button>
   </mat-toolbar-row>
 </mat-toolbar>

src/app/sidebar/sidebar.component.html

@@ -0,0 +1,22 @@
+<mat-sidenav-container class="full-height flex-container bg-primary">
+	<mat-sidenav #sidenav mode="side" [(opened)]="opened">
+        <mat-nav-list >
+            <mat-list-item>
+            <div class="flex-items" [routerLink]="['/dashboard', 'graphs']"><p>View Graphs</p></div>
+            </mat-list-item>
+            <mat-list-item>
+                <div class="flex-items" [routerLink]="['/dashboard', 'imports']"><p>Imported Files</p></div>
+                </mat-list-item>
+                <mat-list-item>
+                    <div class="flex-items" [routerLink]="['/dashboard', 'deposits']"><p>Manage Label Inventory</p></div>
+                    </mat-list-item>
+        </mat-nav-list>
+	</mat-sidenav>
+
+	<mat-sidenav-content >
+		<p>
+			<mat-checkbox [(ngModel)]="opened">Toggle Sidebar</mat-checkbox>
+		</p>
+		<router-outlet></router-outlet>
+	</mat-sidenav-content>
+</mat-sidenav-container>

src/app/sidebar/sidebar.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SidebarComponent } from './sidebar.component';
+
+describe('SidebarComponent', () => {
+  let component: SidebarComponent;
+  let fixture: ComponentFixture<SidebarComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SidebarComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SidebarComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/sidebar/sidebar.component.ts

@@ -0,0 +1,16 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-sidebar',
+  templateUrl: './sidebar.component.html',
+  styleUrls: ['./sidebar.component.scss']
+})
+export class SidebarComponent implements OnInit {
+
+  constructor() { }
+  opened: boolean;
+
+  ngOnInit(): void {
+  }
+
+}