added toggler for asidenav

templates/widgets/asidenav.hamlet

@@ -28,3 +28,5 @@
           <a .asidenav__link-wrapper href="/course/S2018/dbs/show">
             <div .asidenav__link-triple>DBS
             <div .asidenav__link-label>Datenbanksysteme
+
+  <div .asidenav__toggler>

templates/widgets/asidenav.julius

@@ -41,11 +41,9 @@
       return asideEl.classList.contains(collClass);
     }
 
-    asideEl.addEventListener('click', function(event) {
-      if (event.target === asideEl) {
-        collapsed = !collapsed;
-        check();
-      }
+    asideEl.querySelector('.asidenav__toggler').addEventListener('click', function(event) {
+      collapsed = !collapsed;
+      check();
     }, false);
     asideEl.addEventListener('transitionend', function(event) {
       if (event.propertyName === 'opacity') {

templates/widgets/asidenav.lucius

@@ -1,4 +1,5 @@
 .main__aside {
+  position: relative;
   background-color: var(--darkbase);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   z-index: 1;
@@ -46,6 +47,7 @@
 .asidenav__box {
   margin: 10px 0;
   padding: 10px 0;
+  width: 100%;
   border-bottom: 4px solid var(--whitebase);
   background-color: var(--darkbase);
 }
@@ -114,3 +116,32 @@
     outline: 1px solid white;
   }
 }
+
+.asidenav__toggler {
+  position: absolute;
+  bottom: 20px;
+  height: 50px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color .2s ease;
+  border-top: 1px solid var(--whitebase);
+  border-bottom: 1px solid var(--whitebase);
+  cursor: pointer;
+
+  &::before {
+    content: '\e079';
+    display: block;
+    font-family: 'Glyphicons Halflings';
+    color: var(--whitebase);
+  }
+
+  &:hover {
+    background-color: var(--lightbase);
+  }
+}
+
+.main__aside--collapsed .asidenav__toggler::before {
+  content: '\e080';
+}