feat(demo): add navigation

Author: tomastrajan

projects/elements-demo/src/app/app-routing.module.ts

@@ -2,21 +2,21 @@ import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 
 import { HomeComponent } from './features/home/home/home.component';
-import { EagerComponent } from './features/eager/eager/eager.component';
 
 const routes: Routes = [
   {
     path: 'home',
     component: HomeComponent
   },
   {
-    path: 'eager',
-    component: EagerComponent
+    path: 'docs',
+    loadChildren: () =>
+      import('./features/docs/docs.module').then(m => m.DocsModule)
   },
   {
-    path: 'lazy',
+    path: 'examples',
     loadChildren: () =>
-      import('./features/lazy/lazy.module').then(m => m.LazyModule)
+      import('./features/examples/examples.module').then(m => m.ExamplesModule)
   },
   {
     path: '**',

projects/elements-demo/src/app/app.module.ts

@@ -8,7 +8,6 @@ import { LazyElementsModule } from '../../../elements/src/lib/lazy-elements/lazy
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
 import { HomeModule } from './features/home/home.module';
-import { EagerModule } from './features/eager/eager.module';
 import { AppRoutingModule } from './app-routing.module';
 
 import { AppComponent } from './app.component';
@@ -29,8 +28,7 @@ import { AppComponent } from './app.component';
     CoreModule,
     SharedModule,
     AppRoutingModule,
-    HomeModule,
-    EagerModule
+    HomeModule
   ],
   providers: [],
   bootstrap: [AppComponent]

projects/elements-demo/src/app/core/layout/navigation/navigation.component.html

@@ -1 +1,26 @@
-<p>navigation works!</p>
+<mat-nav-list>
+  <ng-container *ngFor="let nav of navigation">
+    <a
+      mat-list-item
+      [routerLink]="nav.url"
+      routerLinkActive="active"
+      #rla="routerLinkActive"
+    >
+      {{ nav.label }}
+      <mat-icon matListIcon>{{
+        nav.children && rla.isActive ? 'expand_more' : 'chevron_right'
+      }}</mat-icon>
+    </a>
+    <ng-container *ngIf="nav.children && rla.isActive">
+      <a
+        mat-list-item
+        class="sub-nav"
+        *ngFor="let child of nav.children"
+        [routerLink]="child.url"
+        routerLinkActive="active"
+      >
+        {{ child.label }}
+      </a>
+    </ng-container>
+  </ng-container>
+</mat-nav-list>

projects/elements-demo/src/app/core/layout/navigation/navigation.component.scss

@@ -0,0 +1,13 @@
+mat-nav-list {
+  padding-top: 0;
+}
+
+a[mat-list-item] {
+  width: 250px;
+
+  &.sub-nav {
+    width: auto;
+    padding-left: 33px !important;
+    font-size: 1em !important;
+  }
+}

projects/elements-demo/src/app/core/layout/navigation/navigation.component.scss-theme.scss

@@ -0,0 +1,15 @@
+@import '~@angular/material/theming';
+
+@mixin demo-navigation-component-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  demo-navigation {
+    .active {
+      color: mat-color($primary) !important;
+    }
+  }
+}

projects/elements-demo/src/app/core/layout/navigation/navigation.component.spec.ts

@@ -1,4 +1,5 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
 
 import { SharedModule } from '../../../shared/shared.module';
 
@@ -10,7 +11,7 @@ describe('NavigationComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [SharedModule],
+      imports: [RouterTestingModule, SharedModule],
       declarations: [NavigationComponent]
     }).compileComponents();
   }));

projects/elements-demo/src/app/core/layout/navigation/navigation.component.ts

@@ -1,11 +1,48 @@
 import { Component, OnInit } from '@angular/core';
 
+const NAVIGATION = [
+  {
+    label: 'HOME',
+    url: 'home'
+  },
+  {
+    label: 'DOCS',
+    url: 'docs',
+    children: [
+      {
+        label: 'Getting started',
+        url: 'docs/getting-started'
+      },
+      {
+        label: 'Mechanism',
+        url: 'docs/mechanism'
+      }
+    ]
+  },
+  {
+    label: 'EXAMPLES',
+    url: 'examples',
+    children: [
+      {
+        label: 'Basic',
+        url: 'basic'
+      },
+      {
+        label: 'Lazy Loading',
+        url: 'lazy'
+      }
+    ]
+  }
+];
+
 @Component({
   selector: 'demo-navigation',
   templateUrl: './navigation.component.html',
   styleUrls: ['./navigation.component.scss']
 })
 export class NavigationComponent implements OnInit {
+  navigation = NAVIGATION;
+
   constructor() {}
 
   ngOnInit() {}

projects/elements-demo/src/app/features/docs/docs-routing.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { DocsComponent } from './docs.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    redirectTo: 'getting-started',
+    pathMatch: 'full'
+  },
+  {
+    path: '',
+    component: DocsComponent,
+    children: [
+      {
+        path: 'getting-started',
+        loadChildren: () =>
+          import('./getting-started/getting-started.module').then(
+            m => m.GettingStartedModule
+          )
+      },
+      {
+        path: 'mechanism',
+        loadChildren: () =>
+          import('./mechanism/mechanism.module').then(m => m.MechanismModule)
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class DocsRoutingModule {}

projects/elements-demo/src/app/features/eager/eager/eager.component.scss renamed to projects/elements-demo/src/app/features/docs/docs.component.css

@@ -0,0 +1,2 @@
+<h1>Documentation</h1>
+<router-outlet></router-outlet>