feat(nav): improve nav toggling

---

 scss/include/_layout.scss             | 18 ++++++++++---
 src/app.html                          |  2 +-
 src/resources/side-nav/nav-state.js   | 28 ++++++++++++++++++++
 src/resources/side-nav/nav-toggler.js | 14 ++++++----
 src/resources/side-nav/navigation.js  | 38 ++++++++++++++++++----------
 src/resources/side-nav/ui-state.js    | 15 -----------
 6 files changed, 78 insertions(+), 37 deletions(-)

Author: MarcScheib

scss/include/_layout.scss

@@ -9,15 +9,16 @@ body {
   display: flex;
 }
 
-navigation {
+.navigation-pinned {
   flex: 1;
   min-width: 230px;
   max-width: 230px;
   z-index: 1020;
+  display: none;
 }
 
-.sidebar-nav-hidden {
-  display: none;
+.show-navigation {
+  display: block;
 }
 
 navigation-side {
@@ -27,6 +28,17 @@ navigation-side {
   width: 230px;
 }
 
+@media (max-width: 992px) {
+  .show-navigation  {
+    display: block;
+    position: absolute;
+  }
+
+  .show-navigation navigation-side {
+    background-color: #fff;
+  }
+}
+
 main {
   flex: 1;
   margin-top: 54px;

src/app.html

@@ -10,7 +10,7 @@
     <navigation-top router.bind="router"></navigation-top>
   </header>
 
-  <navigation class="sidebar-nav">
+  <navigation class="sidebar-nav navigation-pinned show-navigation">
     <navigation-side></navigation-side>
   </navigation>
 

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

@@ -0,0 +1,28 @@
+const MAX_WIDTH_MOBILE_NAV = 992;
+
+class NavState {
+  navToggled = true;
+  mobileNavToggled = false;
+  mobileNav = false;
+
+  toggleNav() {
+    this.navToggled = !this.navToggled;
+  }
+
+  toggleMobileNav() {
+    this.mobileNavToggled = !this.mobileNavToggled;
+  }
+
+  setMobileNav(mobileNav) {
+    this.mobileNav = mobileNav;
+  }
+
+  isMobileNav() {
+    return this.mobileNav;
+  }
+}
+
+export {
+  MAX_WIDTH_MOBILE_NAV,
+  NavState
+};

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

@@ -1,5 +1,5 @@
 import {customElement, inlineView} from 'aurelia-templating';
-import {UIState} from './ui-state';
+import {NavState, MAX_WIDTH_MOBILE_NAV} from './nav-state';
 
 @customElement('nav-toggler')
 @inlineView(`
@@ -10,13 +10,17 @@ import {UIState} from './ui-state';
   </template>
 `)
 export class NavToggler {
-  static inject = [UIState];
+  static inject = [NavState];
 
-  constructor(uiState) {
-    this.uiState = uiState;
+  constructor(navState) {
+    this.navState = navState;
   }
 
   toggleNav() {
-    this.uiState.toggleNav();
+    if (this.navState.isMobileNav() == false) {
+      this.navState.toggleNav();
+    } else {
+      this.navState.toggleMobileNav();
+    }
   }
 }

src/resources/side-nav/navigation.js

@@ -1,30 +1,42 @@
 import {BindingEngine, customElement, noView, inject} from 'aurelia-framework';
-import {UIState} from './ui-state';
+import {NavState, MAX_WIDTH_MOBILE_NAV} from './nav-state';
 
 @noView()
 @customElement('navigation')
-@inject(BindingEngine, UIState, Element)
+@inject(BindingEngine, NavState, Element)
 export class Navigation {
   showNavigationEvent = () => {
-    if (window.innerWidth < 1200) {
-      this.uiState.hideNav();
+    if (window.innerWidth < MAX_WIDTH_MOBILE_NAV) {
+      this.navState.setMobileNav(true);
+      this.element.classList.remove('navigation-pinned');
     } else {
-      this.uiState.showNav();
+      this.navState.setMobileNav(false);
+      this.element.classList.add('navigation-pinned');
     }
   };
 
-  constructor(bindingEngine, uiState, element) {
-    this.uiState = uiState;
+  constructor(bindingEngine, navState, element) {
+    this.navState = navState;
     this.element = element;
 
-    let subscription = bindingEngine.propertyObserver(this.uiState, 'navVisible').subscribe(this.navStateChanged.bind(this));
+    bindingEngine.propertyObserver(this.navState, 'navToggled').subscribe(this.navStateChanged.bind(this));
+    bindingEngine.propertyObserver(this.navState, 'mobileNavToggled').subscribe(this.mobileNavStateChanged.bind(this));
+    this.showNavigationEvent();
   }
 
-  navStateChanged(newValue, oldValue) {
-    if (this.uiState.navVisible) {
-      this.element.classList.remove('sidebar-nav-hidden')
-    } else {
-      this.element.classList.add('sidebar-nav-hidden')
+  navStateChanged() {
+    if (this.navState.isMobileNav() === false && this.navState.navToggled === true) {
+      this.element.classList.add('show-navigation');
+    } else if (this.navState.isMobileNav() === false && this.navState.navToggled === false) {
+      this.element.classList.remove('show-navigation');
+    }
+  }
+
+  mobileNavStateChanged() {
+    if (this.navState.isMobileNav() === true && this.navState.mobileNavToggled === false) {
+      this.element.classList.add('show-navigation');
+    } else if (this.navState.isMobileNav() === true && this.navState.mobileNavToggled === false) {
+      this.element.classList.remove('show-navigation')
     }
   }