feat(admin-ui): Switch to vertical nav system

admin-ui/src/app/core/components/app-shell/app-shell.component.html

@@ -1,28 +1,26 @@
-<div class="main-container">
+<clr-main-container>
     <!--<div class="alert alert-app-level">
         ALERT
     </div>-->
-    <header class="header header-6">
+    <clr-header>
         <div class="branding">
             <a [routerLink]="['/']">
                 <img src="/assets/cube-logo-75px.png" class="logo">
             </a>
         </div>
         <div class="header-nav">
-            <a href="javascript://" class="active nav-link nav-text">Dashboard</a>
-            <a href="javascript://" class="nav-link nav-text">Orders</a>
-            <a href="javascript://" class="nav-link nav-text">Inventory</a>
-            <a href="javascript://" class="nav-link nav-text">Users</a>
+
         </div>
         <div class="header-actions">
             <vdr-user-menu [userName]="userName$ | async"
                            (logOut)="logOut()"></vdr-user-menu>
         </div>
-    </header>
+    </clr-header>
 
     <div class="content-container">
         <div class="content-area">
             <router-outlet></router-outlet>
         </div>
+        <vdr-main-nav></vdr-main-nav>
     </div>
-</div>
+</clr-main-container>

admin-ui/src/app/core/components/main-nav/main-nav.component.html

@@ -0,0 +1,20 @@
+<nav class="sidenav" [clr-nav-level]="2">
+    <section class="sidenav-content">
+        <section class="nav-group">
+            <input id="tabexample2" type="checkbox">
+            <label for="tabexample2">Catalog</label>
+            <ul class="nav-list">
+                <li><a class="nav-link"><clr-icon shape="library" size="20"></clr-icon>Products</a></li>
+                <li><a class="nav-link"><clr-icon shape="tag" size="20"></clr-icon>Facets</a></li>
+                <li><a class="nav-link"><clr-icon shape="folder-open" size="20"></clr-icon>Categories</a></li>
+            </ul>
+        </section>
+        <section class="nav-group">
+                    <input id="tabexample2" type="checkbox">
+                    <label for="tabexample2">Sales</label>
+                    <ul class="nav-list">
+                        <li><a class="nav-link"><clr-icon shape="shopping-cart" size="20"></clr-icon>Orders</a></li>
+                    </ul>
+                </section>
+    </section>
+</nav>

admin-ui/src/app/core/components/main-nav/main-nav.component.scss

@@ -0,0 +1,15 @@
+@import "variables";
+
+:host {
+    flex: 0 0 auto;
+    order: -1;
+    background-color: $grey-2;
+}
+
+nav.sidenav {
+    height: 100%;
+}
+
+.nav-list clr-icon {
+    margin-right: 12px;
+}

admin-ui/src/app/core/components/main-nav/main-nav.component.spec.ts

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

admin-ui/src/app/core/components/main-nav/main-nav.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'vdr-main-nav',
+  templateUrl: './main-nav.component.html',
+  styleUrls: ['./main-nav.component.scss']
+})
+export class MainNavComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

admin-ui/src/app/core/core.module.ts

@@ -13,6 +13,7 @@ import { LocalStorageService } from './providers/local-storage/local-storage.ser
 import { DataService } from './providers/data/data.service';
 import { AuthGuard } from './providers/guard/auth.guard';
 import { UserMenuComponent } from './components/user-menu/user-menu.component';
+import { MainNavComponent } from './components/main-nav/main-nav.component';
 
 export function createApollo(httpLink: HttpLink, ngrxCache: InMemoryCache) {
   return {
@@ -43,6 +44,6 @@ export function createApollo(httpLink: HttpLink, ngrxCache: InMemoryCache) {
         DataService,
         AuthGuard,
     ],
-    declarations: [AppShellComponent, UserMenuComponent],
+    declarations: [AppShellComponent, UserMenuComponent, MainNavComponent],
 })
 export class CoreModule {}

admin-ui/src/polyfills.ts

@@ -76,4 +76,6 @@ import 'zone.js/dist/zone';  // Included with Angular CLI.
  */
 
 import '@clr/icons';
+import '@clr/icons/shapes/commerce-shapes';
+import '@clr/icons/shapes/essential-shapes';
 import '@webcomponents/custom-elements/custom-elements.min.js';