feat(nav): add nav toggling

Add new feature nav toggler and navigation container. Nav toggler
allows to hide and show the navigation. Navigation container hides
the nav automatically based on the window size.

---

 scss/include/_layout.scss                      |  2 +-
 src/app.html                                   |  4 +-
 src/app.js                                     | 20 +---------
 src/legendsrising.js                           |  3 +-
 src/resources/side-nav/index.js                |  6 +++
 src/resources/side-nav/nav-toggler.js          | 22 +++++++++++
 src/resources/side-nav/navigation.js           | 38 +++++++++++++++++++
 src/resources/side-nav/ui-state.js             | 15 ++++++++
 .../view-elements/navigation-top.html          |  4 +-
 src/resources/view-elements/navigation-top.js  | 11 +-----
 src/services/UIState.js                        | 15 --------
 11 files changed, 91 insertions(+), 49 deletions(-)

Author: MarcScheib

scss/include/_layout.scss

@@ -9,7 +9,7 @@ body {
   display: flex;
 }
 
-aside {
+navigation {
   flex: 1;
   min-width: 230px;
   max-width: 230px;

src/app.html

@@ -10,9 +10,9 @@
     <navigation-top router.bind="router"></navigation-top>
   </header>
 
-  <aside class="sidebar-nav ${uiState.sideNavigationVisibility ? '' : 'sidebar-nav-hidden'}">
+  <navigation class="sidebar-nav">
     <navigation-side></navigation-side>
-  </aside>
+  </navigation>
 
   <main>
     <div class="container-fluid" id="content-container">

src/app.js

@@ -1,36 +1,20 @@
 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, UIState)
+@inject(Router, Endpoint.of(), AppRouterConfig)
 export class App {
-  showNavigationEvent = () => {
-    if (window.innerWidth < 1200) {
-      this.uiState.hideSideNavigation();
-    } else {
-      this.uiState.showSideNavigation();
-    }
-  };
-
-  constructor(router, api, appRouterConfig, uiState) {
+  constructor(router, api, appRouterConfig) {
     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/legendsrising.js

@@ -34,7 +34,8 @@ export function configure(aurelia) {
         .plugin('aurelia-notify', settings => {
           settings.containerSelector = '#notification-container';
           settings.timeout = 10000;
-        });
+        })
+        .feature('resources/side-nav');
 
       aurelia.start()
         .then(a => a.setRoot('app', document.body))

src/resources/side-nav/index.js

@@ -0,0 +1,6 @@
+export function configure(config) {
+  config.globalResources([
+    './nav-toggler',
+    './navigation'
+  ]);
+}

src/resources/side-nav/nav-toggler.js

@@ -0,0 +1,22 @@
+import {customElement, inlineView} from 'aurelia-templating';
+import {UIState} from './ui-state';
+
+@customElement('nav-toggler')
+@inlineView(`
+  <template>
+    <button class="navbar-toggler" type="button" click.delegate="toggleNav()">
+      <i class="fa fa-bars fa-fw"></i>
+    </button>
+  </template>
+`)
+export class NavToggler {
+  static inject = [UIState];
+
+  constructor(uiState) {
+    this.uiState = uiState;
+  }
+
+  toggleNav() {
+    this.uiState.toggleNav();
+  }
+}

src/resources/side-nav/navigation.js

@@ -0,0 +1,38 @@
+import {BindingEngine, customElement, noView, inject} from 'aurelia-framework';
+import {UIState} from './ui-state';
+
+@noView()
+@customElement('navigation')
+@inject(BindingEngine, UIState, Element)
+export class Navigation {
+  showNavigationEvent = () => {
+    if (window.innerWidth < 1200) {
+      this.uiState.hideNav();
+    } else {
+      this.uiState.showNav();
+    }
+  };
+
+  constructor(bindingEngine, uiState, element) {
+    this.uiState = uiState;
+    this.element = element;
+
+    let subscription = bindingEngine.propertyObserver(this.uiState, 'navVisible').subscribe(this.navStateChanged.bind(this));
+  }
+
+  navStateChanged(newValue, oldValue) {
+    if (this.uiState.navVisible) {
+      this.element.classList.remove('sidebar-nav-hidden')
+    } else {
+      this.element.classList.add('sidebar-nav-hidden')
+    }
+  }
+
+  attached() {
+    window.addEventListener('resize', this.showNavigationEvent);
+  }
+
+  detached() {
+    window.removeEventListener('resize', this.showNavigationEvent);
+  }
+}

src/resources/side-nav/ui-state.js

@@ -0,0 +1,15 @@
+export class UIState {
+  navVisible = true;
+
+  toggleNav() {
+    this.navVisible = !this.navVisible;
+  }
+
+  showNav() {
+    this.navVisible = true;
+  }
+
+  hideNav() {
+    this.navVisible = false;
+  }
+}

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

@@ -1,8 +1,6 @@
 <template>
   <nav class="navbar navbar-fixed-top navbar-light bg-faded">
-    <button class="navbar-toggler" type="button" click.delegate="toggleSideNavigation()">
-      <i class="fa fa-bars fa-fw"></i>
-    </button>
+    <nav-toggler></nav-toggler>
     <a class="navbar-brand" href="#">${router.title}</a>
     <ul class="nav navbar-nav pull-right">
       <li class="nav-item" if.bind="!isAuthenticated">

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

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