From 425be24b4ba2fae7404f611d85bcda566bff24e8 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 1 Jul 2018 23:12:49 +0200
Subject: [PATCH] asidenav-cleanup

---
 templates/widgets/asidenav.hamlet |  2 -
 templates/widgets/asidenav.julius | 81 +------------------------------
 templates/widgets/asidenav.lucius |  5 +-
 3 files changed, 4 insertions(+), 84 deletions(-)

diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index 78809b413..ec1a8ea8b 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/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>
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index cc8fb04a8..3fd0f7d69 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -3,83 +3,7 @@
 
   window.utils = window.utils || {};
 
-  // Defines a function to turn an element into an interactive aside-navigation.
-  // 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);
-    }
-  };
+  window.utils.aside = function(asideEl) { };
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -95,7 +19,4 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
 
-  // TODO: make it swipeable on mobile and narrower
-  // utils.aside(asidenavEl);
-
 });
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 01dbae16d..5db72152f 100644
--- a/templates/widgets/asidenav.lucius
+++ b/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 {