feat(nav): add mobile nav toggling

Mobile nav hides when click is different to toggler and navigation.

---

 scss/include/_layout.scss             | 22 ++++++++++----
 src/resources/side-nav/nav-state.js   | 22 ++++++++++----
 src/resources/side-nav/nav-toggler.js | 12 +++-----
 src/resources/side-nav/navigation.js  | 43 +++++++++++++++++++---------
 4 files changed, 68 insertions(+), 31 deletions(-)

Author: MarcScheib

scss/include/_layout.scss

@@ -22,21 +22,33 @@ body {
 }
 
 navigation-side {
+  background-color: #fff;
   position: fixed;
   padding: 14px 22px;
   top: 54px;
   width: 230px;
 }
 
 @media (max-width: 992px) {
-  .show-navigation  {
-    display: block;
-    position: absolute;
+  navigation {
+    display: none;
+    z-index: 20000;
   }
 
-  .show-navigation navigation-side {
+  navigation-side {
+    padding: 5px 0;
+    margin: 2px 0 0;
+    color: #373a3c;
+    text-align: left;
+    list-style: none;
     background-color: #fff;
-    z-index: 20000;
+    border-bottom: 1px solid rgba(0,0,0,.15);
+    border-right: 1px solid rgba(0,0,0,.15);
+    border-bottom-right-radius: .25rem;
+  }
+
+  .show-navigation {
+    position: absolute;
   }
 }
 

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

@@ -1,16 +1,28 @@
 const MAX_WIDTH_MOBILE_NAV = 992;
 
 class NavState {
+  mobileNav = false;
   navToggled = true;
   mobileNavToggled = false;
-  mobileNav = false;
 
-  toggleNav() {
-    this.navToggled = !this.navToggled;
+  constructor() {
+    if (window.innerWidth < MAX_WIDTH_MOBILE_NAV) {
+      this.mobileNav = true;
+      this.navToggled = true;
+      this.mobileNavToggled = false;
+    }
+  }
+
+  toggle() {
+    if (this.mobileNav) {
+      this.mobileNavToggled = !this.mobileNavToggled;
+    } else {
+      this.navToggled = !this.navToggled;
+    }
   }
 
-  toggleMobileNav() {
-    this.mobileNavToggled = !this.mobileNavToggled;
+  setMobileNavToggled(state) {
+    this.mobileNavToggled = state;
   }
 
   setMobileNav(mobileNav) {

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

@@ -1,10 +1,10 @@
 import {customElement, inlineView} from 'aurelia-templating';
-import {NavState, MAX_WIDTH_MOBILE_NAV} from './nav-state';
+import {NavState} from './nav-state';
 
 @customElement('nav-toggler')
 @inlineView(`
   <template>
-    <button class="navbar-toggler" type="button" click.delegate="toggleNav()">
+    <button class="navbar-toggler" type="button" click.delegate="toggle()">
       <i class="fa fa-bars fa-fw"></i>
     </button>
   </template>
@@ -16,11 +16,7 @@ export class NavToggler {
     this.navState = navState;
   }
 
-  toggleNav() {
-    if (this.navState.isMobileNav() == false) {
-      this.navState.toggleNav();
-    } else {
-      this.navState.toggleMobileNav();
-    }
+  toggle() {
+    this.navState.toggle();
   }
 }

src/resources/side-nav/navigation.js

@@ -5,23 +5,37 @@ import {NavState, MAX_WIDTH_MOBILE_NAV} from './nav-state';
 @customElement('navigation')
 @inject(BindingEngine, NavState, Element)
 export class Navigation {
-  showNavigationEvent = () => {
+  constructor(bindingEngine, navState, element) {
+    this.navState = navState;
+    this.element = element;
+    this.windowResizeListener = () => this.handleResize();
+    this.outsideClickListener = event => this.handleBlur(event);
+
+    bindingEngine.propertyObserver(this.navState, 'navToggled').subscribe(this.navStateChanged.bind(this));
+    bindingEngine.propertyObserver(this.navState, 'mobileNavToggled').subscribe(this.mobileNavStateChanged.bind(this));
+  }
+
+  handleResize() {
     if (window.innerWidth < MAX_WIDTH_MOBILE_NAV) {
-      this.navState.setMobileNav(true);
       this.element.classList.remove('navigation-pinned');
+      this.navState.setMobileNav(true);
+      this.navState.setMobileNavToggled(false);
+      this.mobileNavStateChanged();
     } else {
-      this.navState.setMobileNav(false);
       this.element.classList.add('navigation-pinned');
+      this.navState.setMobileNav(false);
+      this.navStateChanged();
     }
-  };
+  }
 
-  constructor(bindingEngine, navState, element) {
-    this.navState = navState;
-    this.element = element;
+  handleBlur(event) {
+    if (this.navState.isMobileNav() === false || event.defaultPrevented === true) {
+      return;
+    }
 
-    bindingEngine.propertyObserver(this.navState, 'navToggled').subscribe(this.navStateChanged.bind(this));
-    bindingEngine.propertyObserver(this.navState, 'mobileNavToggled').subscribe(this.mobileNavStateChanged.bind(this));
-    this.showNavigationEvent();
+    if (this.element.contains(event.target) === false && this.navState.mobileNavToggled === true) {
+      this.navState.toggle();
+    }
   }
 
   navStateChanged() {
@@ -36,15 +50,18 @@ export class Navigation {
     if (this.navState.isMobileNav() === true && this.navState.mobileNavToggled === true) {
       this.element.classList.add('show-navigation');
     } else if (this.navState.isMobileNav() === true && this.navState.mobileNavToggled === false) {
-      this.element.classList.remove('show-navigation')
+      this.element.classList.remove('show-navigation');
     }
   }
 
   attached() {
-    window.addEventListener('resize', this.showNavigationEvent);
+    window.addEventListener('resize', this.windowResizeListener);
+    document.addEventListener('click', this.outsideClickListener);
+    this.handleResize();
   }
 
   detached() {
-    window.removeEventListener('resize', this.showNavigationEvent);
+    window.removeEventListener('resize', this.windowResizeListener);
+    document.removeEventListener('click', this.outsideClickListener);
   }
 }