From 0b3d662eeae8ca0e54d94e266f1283a8bc1c5e79 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Mon, 19 Mar 2018 17:29:50 +0100
Subject: [PATCH] added toggler for asidenav

---
 templates/widgets/asidenav.hamlet |  2 ++
 templates/widgets/asidenav.julius |  8 +++-----
 templates/widgets/asidenav.lucius | 31 +++++++++++++++++++++++++++++++
 3 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index 2ced1a97a..0d6e252d1 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/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>
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index 019b36da2..9b43029ee 100644
--- a/templates/widgets/asidenav.julius
+++ b/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') {
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index e150b3c2a..b6739877e 100644
--- a/templates/widgets/asidenav.lucius
+++ b/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';
+}