asidenav-cleanup

templates/widgets/asidenav.hamlet

@@ -18,5 +18,3 @@ $newline never
                     <li .asidenav__nested-list-item>
                       <a .asidenav__link-wrapper href=@{menuItemRoute}>#{menuItemLabel}
                   $of _
-
-  <div .asidenav__toggler>

templates/widgets/asidenav.julius

@@ -3,83 +3,7 @@
 
   window.utils = window.utils || {};
 
-  // Defines a function to turn an element into an interactive aside-navigation.
+  window.utils.aside = function(asideEl) { };
-  // If the screen is smaller than 999px the navigation is automatically
-  // collapsed - even when dynamically resized (e.g. switching from portatit
-  // to landscape).
-  // The can user may also manually collapse and expand the navigation by
-  // using the little arrow at the bottom.
-  window.utils.aside = function(asideEl) {
-    var collapsed = false;
-    var collClass = 'main__aside--collapsed';
-    // animClass used to enable transitions only when needed so that
-    // (potentially happening) initial collapse of the asidenav
-    // goes unnoticed by the user.
-    var animClass = 'main__aside--transitioning';
-    var hoveringAboveCollapsedNav = false;
-
-    init();
-    function init() {
-      var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
-      if (document.body.getBoundingClientRect().width < 999 || collLS) {
-        asideEl.classList.add(collClass);
-        collapsed = true;
-      }
-      addListener();
-    }
-
-    function check() {
-      if (collapsed && !hasCollapsedClass() || !collapsed && hasCollapsedClass()) {
-        asideEl.classList.add(animClass);
-        asideEl.classList.toggle(collClass, collapsed);
-        window.localStorage.setItem('asidenavCollapsed', collapsed);
-      }
-    }
-
-    function hasCollapsedClass() {
-      return asideEl.classList.contains(collClass);
-    }
-
-    function addListener() {
-
-      asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
-        collapsed = !collapsed;
-        check();
-      }, false);
-
-      asideEl.addEventListener('transitionend', function(event) {
-        if (event.propertyName === 'opacity') {
-          asideEl.classList.remove(animClass);
-        }
-      }, false);
-
-      window.addEventListener('resize', function() {
-        collapsed = document.body.getBoundingClientRect().width < 999;
-        check();
-      }, false);
-
-      asideEl.addEventListener('mouseover', function(event) {
-        if (!hasCollapsedClass()) {
-          return false;
-        }
-        hoveringAboveCollapsedNav = true;
-        window.setTimeout(function() {
-          if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
-            asideEl.classList.add('pseudo-hover');
-          }
-        }, 200);
-      }, false);
-
-      asideEl.addEventListener('mouseleave', function(event) {
-        hoveringAboveCollapsedNav = false;
-        window.setTimeout(function() {
-          if (!hoveringAboveCollapsedNav) {
-            asideEl.classList.remove('pseudo-hover');
-          }
-        }, 200);
-      }, false);
-    }
-  };
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -95,7 +19,4 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
 
-  // TODO: make it swipeable on mobile and narrower
-  // utils.aside(asidenavEl);
-
 });

templates/widgets/asidenav.lucius

@@ -158,10 +158,11 @@
 
     .asidenav__box-title {
       width: 50px;
-      padding: 1px;
       font-size: 18px;
       text-align: center;
-      margin-bottom: 0;
+      padding: 10px 1px;
+      margin: 0;
+      background-color: var(--color-darker);
     }
 
     .asidenav__link-shorthand {