From 3caaca9793a464ea79bf2d41af863eee705debf6 Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Tue, 1 Oct 2019 18:45:59 -0400
Subject: [PATCH] Some more navigation work

---
 .../src/app/components/nav/nav.component.html | 58 +++++++++++++++++--
 .../src/app/components/nav/nav.component.scss | 12 ++++
 2 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/Display/src/app/components/nav/nav.component.html b/Display/src/app/components/nav/nav.component.html
index e7c14ec..511e2bf 100644
--- a/Display/src/app/components/nav/nav.component.html
+++ b/Display/src/app/components/nav/nav.component.html
@@ -7,13 +7,59 @@
 <mat-sidenav-container class="sidenav-container">
     <mat-sidenav #drawer class="sidenav" [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'" [mode]="(isHandset$ | async) ? 'over' : 'side'" [opened]="(isHandset$ | async) ? false : true">
         <mat-nav-list>
-            <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Dashboard</a>
-            <a routerLink="/laundry" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Laundry</a>
-            <a routerLink="/weather" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Weather</a>
+            <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <mat-icon matListIcon class="nav-icon">
+                    home
+                </mat-icon>
+                <span class="nav-caption">
+                    Dashboard
+                </span>
+            </a>
 
-            <a routerLink="/weather-charts/temperature" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Temperature</a>
-            <a routerLink="/weather-charts/humidity" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Humidity</a>
-            <a routerLink="/weather-charts/pressure" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>Pressure</a>
+            <a routerLink="/laundry" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <mat-icon matListIcon class="nav-icon">
+                    local_laundry_service
+                </mat-icon>
+                <span class="nav-caption">
+                    Laundry
+                </span>
+            </a>
+
+            <a routerLink="/weather" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <mat-icon matListIcon class="nav-icon">
+                    cloud
+                </mat-icon>
+                <span class="nav-caption">
+                    Weather
+                </span>
+            </a>
+
+            <mat-list-item>
+                <mat-icon matListIcon class="nav-icon">
+                    multiline_chart
+                </mat-icon>
+                <span class="nav-caption">
+                    Weather Charts
+                </span>
+            </mat-list-item>
+
+            <a routerLink="/weather-charts/temperature" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <span class="nav-sub-item">
+                    Temperature
+                </span>
+            </a>
+
+            <a routerLink="/weather-charts/humidity" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <span class="nav-sub-item">
+                    Humidity
+                </span>
+            </a>
+
+            <a routerLink="/weather-charts/pressure" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }" mat-list-item>
+                <span class="nav-sub-item">
+                    Pressure
+                </span>
+            </a>
         </mat-nav-list>
     </mat-sidenav>
     <mat-sidenav-content>
diff --git a/Display/src/app/components/nav/nav.component.scss b/Display/src/app/components/nav/nav.component.scss
index 51a8876..eeabb36 100644
--- a/Display/src/app/components/nav/nav.component.scss
+++ b/Display/src/app/components/nav/nav.component.scss
@@ -19,3 +19,15 @@
 .mat-sidenav-content {
   padding: 20px;
 }
+
+.nav-caption {
+  padding-left: 8px;
+}
+
+.nav-icon {
+  color: #2f4f4f;
+}
+
+.nav-sub-item {
+    padding-left: 40px !important;
+}