feat: sidenav

tomastrajan · May 14, 2017 · c897e94 · c897e94
1 parent b1753ad
commit c897e94
Show file tree

Hide file tree

Showing 12 changed files with 138 additions and 42 deletions.
diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
@@ -15,7 +15,8 @@ const routes: Routes = [
 ];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  // useHash supports github.io demo page, remove in your app
+  imports: [RouterModule.forRoot(routes, { useHash: true })],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,33 +1,59 @@
-<div [class]="themeClass">
-  <md-toolbar color="primary" class="toolbar">
-    <span>Angular NGrx Material Starter</span>
-    <span class="spacer"></span>
-    <button md-button routerLink="about" routerLinkActive="active">About</button>
-    <button md-button routerLink="features" routerLinkActive="active">Features</button>
-    <button md-button>Examples</button>
-    <button md-icon-button [mdMenuTriggerFor]="toolbarMenu">
-      <md-icon>more_vert</md-icon>
-    </button>
-    <md-menu #toolbarMenu="mdMenu">
-      <button md-menu-item disabled>
-        <md-icon>person</md-icon>
-        <span>Manage account</span>
+<div [class]="'holder ' + themeClass">
+
+  <md-sidenav-container class="sidenav-container">
+
+    <md-sidenav #sidenav class="sidenav" mode="push">
+      <div class="branding"><img [src]="logo" /> <span>Angular Starter</span></div>
+      <md-nav-list>
+        <a md-list-item *ngFor="let item of navigation" (click)="sidenav.close()"
+           [routerLink]="[item.link]" routerLinkActive="active">
+          {{item.label}}
+        </a>
+      </md-nav-list>
+    </md-sidenav>
+
+    <md-toolbar color="primary" class="toolbar">
+      <button md-icon-button class="hidden-md-up" (click)="sidenav.open()">
+        <md-icon>menu</md-icon>
       </button>
-      <button md-menu-item routerLink="settings">
-        <md-icon>settings</md-icon>
-        <span>Settings</span>
+
+      <span routerLink="" class="branding spacer hidden-md-up text-center"><img [src]="logo" /> Angular NGrx Material Starter</span>
+      <span routerLink="" class="branding spacer hidden-sm-down"><img [src]="logo" /> Angular NGrx Material Starter</span>
+
+      <span class="hidden-sm-down">
+        <button md-button *ngFor="let item of navigation" [routerLink]="[item.link]" routerLinkActive="active">
+          {{item.label}}
+        </button>
+      </span>
+
+      <button md-icon-button [mdMenuTriggerFor]="toolbarMenu">
+        <md-icon>more_vert</md-icon>
       </button>
-      <button md-menu-item disabled>
-        <md-icon>power_settings_new</md-icon>
-        <span>Logout</span>
-      </button>
-    </md-menu>
-  </md-toolbar>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-sm-12">
-        <router-outlet></router-outlet>
+      <md-menu #toolbarMenu="mdMenu">
+        <button md-menu-item disabled>
+          <md-icon>person</md-icon>
+          <span>Manage account</span>
+        </button>
+        <button md-menu-item routerLink="settings">
+          <md-icon>settings</md-icon>
+          <span>Settings</span>
+        </button>
+        <button md-menu-item disabled>
+          <md-icon>power_settings_new</md-icon>
+          <span>Logout</span>
+        </button>
+      </md-menu>
+
+    </md-toolbar>
+
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-sm-12">
+          <router-outlet></router-outlet>
+        </div>
       </div>
     </div>
-  </div>
+
+  </md-sidenav-container>
+
 </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
@@ -1,10 +1,42 @@
-.toolbar{
+.holder, .sidenav-container {
+  height: 100%;
+}
+
+.toolbar {
 
   button {
     margin: 0 10px 0 0;
   }
 
+  .branding {
+    cursor: pointer;
+  }
+
   .spacer {
     flex: 1 1 auto;
   }
 }
+
+.sidenav {
+  width: 250px;
+
+  .branding {
+    padding: 10px;
+    font-size: 20px;
+    font-weight: bold;
+    border-bottom: 1px solid;
+
+    img {
+      margin: 0 10px 0 0;
+    }
+
+    span {
+      position: relative;
+      top: 3px;
+    }
+  }
+
+  .mat-nav-list {
+    padding-top: 0px;
+  }
+}
diff --git a/src/app/app.component.scss-theme.scss b/src/app/app.component.scss-theme.scss
@@ -12,6 +12,14 @@
       }
     }
   }
+  .sidenav {
+    a {
+      &.active {
+        color: mat-color($accent, default-contrast);
+        background-color: mat-color($accent);
+      }
+    }
+  }
 }
 
 .default-theme {

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -12,9 +12,16 @@ import 'rxjs/add/operator/map';
 })
 export class AppComponent implements OnDestroy {
 
+  themeClass: string;
+
   private unsubscribe$: Subject<void> = new Subject<void>();
 
-  themeClass: string;
+  logo = require('../assets/logo.png');
+  navigation = [
+    { link: 'about', label: 'About' },
+    { link: 'features', label: 'Features' },
+    { link: 'examples', label: 'Examples' },
+  ];
 
   constructor(
     overlayContainer: OverlayContainer,

diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
@@ -6,6 +6,8 @@ import {
   MdToolbarModule,
   MdMenuModule,
   MdSelectModule,
+  MdSidenavModule,
+  MdListModule,
   MdIconModule
 } from '@angular/material';
 
@@ -17,6 +19,8 @@ import {
     MdButtonModule,
     MdToolbarModule,
     MdSelectModule,
+    MdSidenavModule,
+    MdListModule,
     MdMenuModule,
     MdIconModule
   ],
@@ -27,6 +31,8 @@ import {
 
     MdButtonModule,
     MdMenuModule,
+    MdSidenavModule,
+    MdListModule,
     MdSelectModule,
     MdToolbarModule,
     MdIconModule

diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/index.html b/src/index.html
@@ -5,7 +5,7 @@
   <title>AngularNgrxMaterialStarter</title>
   <base href="/">
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>

diff --git a/src/styles.scss b/src/styles.scss
@@ -1,12 +1,17 @@
 @import '~bootstrap/scss/bootstrap-reboot';
 @import '~bootstrap/scss/bootstrap-grid';
+@import '~bootstrap/scss/utilities';
 
 * {
   &:active, :focus {
     outline: none !important;
   }
 }
 
+html, body {
+  height: 100%;
+}
+
 @import '~@angular/material/theming';
 
 @include mat-core();

diff --git a/src/themes/alternative-theme.scss b/src/themes/alternative-theme.scss
@@ -1,4 +1,9 @@
-$anms-alternative-primary: mat-palette($mat-purple, 900);
-$anms-alternative-accent: mat-palette($mat-amber, A700);
-$anms-alternative-warn: mat-palette($mat-deep-orange);
-$anms-alternative-theme: mat-light-theme($anms-alternative-primary, $anms-alternative-accent, $anms-alternative-warn);
+$anms-alternative-primary: mat-palette($mat-grey, 900);
+$anms-alternative-accent: mat-palette($mat-pink);
+$anms-alternative-warn: mat-palette($mat-red);
+
+$anms-alternative-theme: mat-light-theme(
+    $anms-alternative-primary,
+    $anms-alternative-accent,
+    $anms-alternative-warn
+);
diff --git a/src/themes/default-theme.scss b/src/themes/default-theme.scss
@@ -1,5 +1,9 @@
-$anms-primary: mat-palette($mat-pink, 700);
-//$anms-accent: mat-palette($mat-light-green, A700);
-$anms-accent: mat-palette($mat-grey, 900);
-$anms-warn: mat-palette($mat-red);
-$anms-theme: mat-light-theme($anms-primary, $anms-accent, $anms-warn);
+$anms-primary: mat-palette($mat-purple, 900);
+$anms-accent: mat-palette($mat-pink, A700);
+$anms-warn: mat-palette($mat-deep-orange);
+
+$anms-theme: mat-light-theme(
+    $anms-primary,
+    $anms-accent,
+    $anms-warn
+);
diff --git a/src/tsconfig.app.json b/src/tsconfig.app.json
@@ -4,7 +4,9 @@
     "outDir": "../out-tsc/app",
     "module": "es2015",
     "baseUrl": "",
-    "types": []
+    "types": [
+      "node"
+    ]
   },
   "exclude": [
     "test.ts",