feat(nav): add nav toggling

Author: MarcScheib

scss/include/_layout.scss

@@ -16,10 +16,8 @@ aside {
   z-index: 1020;
 }
 
-@include media-breakpoint-down(lg) {
-  aside {
-    display: none;
-  }
+.sidebar-nav-hidden {
+  display: none;
 }
 
 navigation-side {

scss/include/_top_navigation.scss

@@ -3,7 +3,11 @@ header {
     border-bottom: 1px solid $top-navigation-border-color;
   }
 
+  .navbar-brand {
+    float: none;
+  }
+
   .bg-faded {
     background-color: $top-navigation-bg-color;
   }
-}
+}

src/app.html

@@ -10,7 +10,7 @@
     <navigation-top router.bind="router"></navigation-top>
   </header>
 
-  <aside class="sidebar-nav">
+  <aside class="sidebar-nav ${uiState.sideNavigationVisibility ? '' : 'sidebar-nav-hidden'}">
     <navigation-side></navigation-side>
   </aside>
 

src/app.js

@@ -1,19 +1,36 @@
 import {Endpoint} from 'aurelia-api';
 import {inject} from 'aurelia-framework';
 import {Router} from 'aurelia-router';
+import {DOM} from 'aurelia-pal';
+
 import AppRouterConfig from './configuration/router-config';
+import {UIState} from './services/UIState';
 import 'jquery';
 import 'bootstrap';
 
-@inject(Router, Endpoint.of(), AppRouterConfig)
+@inject(Router, Endpoint.of(), AppRouterConfig, UIState)
 export class App {
-  constructor(router, api, appRouterConfig) {
+  showNavigationEvent = () => {
+    if (window.innerWidth < 1200) {
+      this.uiState.hideSideNavigation();
+    } else {
+      this.uiState.showSideNavigation();
+    }
+  };
+
+  constructor(router, api, appRouterConfig, uiState) {
     this.router = router;
     this.api = api;
     this.appRouterConfig = appRouterConfig;
+    this.uiState = uiState;
   }
 
   activate() {
     this.appRouterConfig.configure();
+    window.addEventListener('resize', this.showNavigationEvent);
+  }
+
+  deactivate() {
+    window.removeEventListener('resize', this.showNavigationEvent);
   }
 }

src/resources/view-elements/navigation-side.html

@@ -2,7 +2,7 @@
   <ul class="nav-container">
     <li>
       <a href="#/news" class="nav-item-toggle">
-        <i class="nav-item-icon fa fa-bars fa-fw"></i> News
+        <i class="nav-item-icon fa fa-newspaper-o fa-fw"></i> News
       </a>
     </li>
     <li>

src/resources/view-elements/navigation-top.html

@@ -1,27 +1,25 @@
 <template>
   <nav class="navbar navbar-fixed-top navbar-light bg-faded">
-    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navigation-top-collapse">
-      &#9776;
+    <button class="navbar-toggler" type="button" click.delegate="toggleSideNavigation()">
+      <i class="fa fa-bars fa-fw"></i>
     </button>
-    <div class="collapse navbar-toggleable-xs" id="navigation-top-collapse">
-      <a class="navbar-brand" href="#">${router.title}</a>
-      <ul class="nav navbar-nav pull-right">
-        <li class="nav-item" if.bind="!isAuthenticated">
-          <a class="nav-link" href="#/users/signup">
-            <i class="fa fa-user fa-fw"></i> Sign Up
-          </a>
-        </li>
-        <li class="nav-item dropdown" if.bind="!isAuthenticated">
-          <a class="nav-link" href="#/auth/signin">
-            <i class="fa fa-sign-in fa-fw"></i> Sign In
-          </a>
-        </li>
-        <li class="nav-item" if.bind="isAuthenticated">
-          <a class="nav-link" href="#/auth/signout">
-            <i class="fa fa-sign-out fa-fw"></i> Sign Out
-          </a>
-        </li>
-      </ul>
-    </div>
+    <a class="navbar-brand" href="#">${router.title}</a>
+    <ul class="nav navbar-nav pull-right">
+      <li class="nav-item" if.bind="!isAuthenticated">
+        <a class="nav-link" href="#/users/signup">
+          <i class="fa fa-user fa-fw"></i> <span class="hidden-xs-down">Sign Up</span>
+        </a>
+      </li>
+      <li class="nav-item" if.bind="!isAuthenticated">
+        <a class="nav-link" href="#/auth/signin">
+          <i class="fa fa-sign-in fa-fw"></i> <span class="hidden-xs-down">Sign In</span>
+        </a>
+      </li>
+      <li class="nav-item" if.bind="isAuthenticated">
+        <a class="nav-link" href="#/auth/signout">
+          <i class="fa fa-sign-out fa-fw"></i> <span class="hidden-xs-down">Sign Out</span>
+        </a>
+      </li>
+    </ul>
   </nav>
 </template>

src/resources/view-elements/navigation-top.js

@@ -1,12 +1,19 @@
 import {bindable, inject} from 'aurelia-framework';
 import {AuthService} from 'aurelia-authentication';
 
-@inject(AuthService)
+import {UIState} from '../../services/UIState';
+
+@inject(AuthService, UIState)
 export class NavigationTop {
   @bindable router = null;
 
-  constructor(auth) {
+  constructor(auth, uiState) {
     this.auth = auth;
+    this.uiState = uiState;
+  }
+
+  toggleSideNavigation() {
+    this.uiState.toggleSideNavigation();
   }
 
   get isAuthenticated() {

src/services/UIState.js

@@ -0,0 +1,15 @@
+export class UIState {
+  sideNavigationVisibility = true;
+
+  toggleSideNavigation() {
+    this.sideNavigationVisibility = !this.sideNavigationVisibility;
+  }
+
+  showSideNavigation() {
+    this.sideNavigationVisibility = true;
+  }
+
+  hideSideNavigation() {
+    this.sideNavigationVisibility = false;
+  }
+}