From d480195b2d841226c1a2bd51deddfc5e09b79935 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sat, 17 Mar 2018 16:24:55 +0100
Subject: [PATCH] collapsible aside navigation

---
 templates/default-layout.hamlet   |  6 ++--
 templates/default-layout.lucius   | 16 ---------
 templates/widgets/asidenav.hamlet | 33 ++++++++++---------
 templates/widgets/asidenav.julius | 55 +++++++++++++++++++++++++++++++
 templates/widgets/asidenav.lucius | 43 ++++++++++++++++++++++--
 templates/widgets/navbar.hamlet   | 25 +++++++-------
 6 files changed, 128 insertions(+), 50 deletions(-)
 create mode 100644 templates/widgets/asidenav.julius

diff --git a/templates/default-layout.hamlet b/templates/default-layout.hamlet
index f615a31c1..56b0aeec6 100644
--- a/templates/default-layout.hamlet
+++ b/templates/default-layout.hamlet
@@ -1,11 +1,9 @@
 <!-- navigation -->
-<div .navbar-container>
-  ^{navbar}
+^{navbar}
 
 <div .main>
 
-  <aside .main__aside>
-    ^{asidenav}
+  ^{asidenav}
 
   <div .main__content>
     <!-- breadcrumbs -->
diff --git a/templates/default-layout.lucius b/templates/default-layout.lucius
index a20eebe52..f158a3f75 100644
--- a/templates/default-layout.lucius
+++ b/templates/default-layout.lucius
@@ -46,9 +46,6 @@
   --header-height-collapsed: 50px;
 }
 
-
-
-
 * {
   box-sizing: border-box;
   padding: 0;
@@ -126,19 +123,6 @@ th {
   min-height: calc(100vh - var(--header-height));
 }
 
-.main__aside {
-  width: 300px;
-  flex-shrink: 0;
-  padding-right: 20px;
-  padding-left: 4vw;
-  background-color: var(--darkbase);
-  /*background: -moz-linear-gradient(right, var(--darkbase) 0%, #395069 100%); /* FF3.6-15 */*/
-  /*background: -webkit-linear-gradient(right, var(--darkbase) 0%, #395069 100%); /* Chrome10-25,Safari5.1-6 */*/
-  /*background: linear-gradient(to left, var(--darkbase) 0%, #395069 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */*/
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-  z-index: 1;
-}
-
 .main__content {
   background-color: white;
   padding: 20px 40px;
diff --git a/templates/widgets/asidenav.hamlet b/templates/widgets/asidenav.hamlet
index 542f92688..ee6fee3de 100644
--- a/templates/widgets/asidenav.hamlet
+++ b/templates/widgets/asidenav.hamlet
@@ -1,17 +1,18 @@
-<div .asidenav>
-  <div .asidenav__box>
-    <ul .asidenav__list>
-      $forall menuType <- menuTypes
-        $case menuType
-          $of NavbarLeft (MenuItem label route _)
-            <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
-              <a .asidenav__link href=@{route}>#{label}
-          $of _
+<aside .main__aside>
+  <div .asidenav>
+    <div .asidenav__box--dont-hide>
+      <ul .asidenav__list>
+        $forall menuType <- menuTypes
+          $case menuType
+            $of NavbarLeft (MenuItem label icon route _)
+              <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
+                <a .asidenav__link.asidenav__icon--#{icon} href=@{route}>#{label}
+            $of _
 
-  <div .asidenav__box>
-    <h3 .asidenav__box-title>WiSe 17/18
-    <ul .asidenav__list>
-      <li>CD
-      <li>IxD
-      <li>Funktionale Programmierung
-      <li>Programmierung und Modellierung
+    <div .asidenav__box>
+      <h3 .asidenav__box-title>WiSe 17/18
+      <ul .asidenav__list>
+        <li>CD
+        <li>IxD
+        <li>Funktionale Programmierung
+        <li>Programmierung und Modellierung
diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
new file mode 100644
index 000000000..148590e2e
--- /dev/null
+++ b/templates/widgets/asidenav.julius
@@ -0,0 +1,55 @@
+(function() {
+  'use strict';
+
+  window.utils = window.utils || {};
+
+  window.utils.aside = function(el) {
+    var asideEl = el;
+    var collapsed = false;
+    var collClass = 'main__aside--collapsed';
+    var animClass = 'main__aside--transitioning';
+
+    init();
+    function init() {
+      var collLS = window.localStorage.getItem('asidenavCollapsed') === 'true';
+      if (document.body.getBoundingClientRect().width < 999 || collLS) {
+        asideEl.classList.add(collClass);
+        collapsed = true;
+      }
+    }
+
+    function check() {
+      if (collapsed && !hasClass() || !collapsed && hasClass()) {
+        asideEl.classList.add(animClass);
+        asideEl.classList.toggle(collClass, collapsed);
+        window.localStorage.setItem('asidenavCollapsed', collapsed);
+      }
+    }
+
+    function hasClass() {
+      return asideEl.classList.contains(collClass);
+    }
+
+    asideEl.addEventListener('click', function(event) {
+      if (event.target === asideEl) {
+        collapsed = !collapsed;
+        check();
+      }
+    });
+    asideEl.addEventListener('transitionend', function(event) {
+      if (event.propertyName === 'opacity') {
+        asideEl.classList.remove(animClass);
+      }
+    });
+    window.addEventListener('resize', function() {
+      collapsed = document.body.getBoundingClientRect().width < 999;
+      check();
+    });
+  };
+})();
+
+document.addEventListener('DOMContentLoaded', function() {
+
+  utils.aside(document.querySelector('.main__aside'));
+
+});
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 7c2b880c9..9e73780e5 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -1,21 +1,60 @@
+.main__aside {
+  flex-shrink: 0;
+  background-color: var(--darkbase);
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+  z-index: 1;
+  width: 300px;
+  overflow: hidden;
+}
+.main__aside--transitioning {
+  transition: width .2s ease;
+}
+.main__aside--transitioning .asidenav__box{
+  transition: opacity .2s ease;
+}
+
+.main__aside--collapsed {
+  width: 50px;
+}
+
+.main__aside--collapsed .asidenav__box {
+  opacity: 0;
+}
+.main__aside--collapsed .asidenav__box--dont-hide {
+  opacity: 1;
+}
+
+.main__aside--collapsed:not(.main__aside--transitioning) .asidenav__box {
+  visibility: hidden;
+  pointer-events: none;
+  z-index: -10;
+  height: 0;
+  padding: 0;
+  margin: 0;
+}
+
 .asidenav {
+  width: 300px;
   margin-top: 20px;
   color: white;
 }
 .asidenav__box {
   margin: 10px 0;
-  padding: 10px;
+  padding: 10px 0;
   border-bottom: 4px solid var(--whitebase);
 }
+
 .asidenav__box-title {
   margin-left: -10px;
 }
 
 .asidenav .asidenav__link {
+  position: relative;
   display: block;
   padding: 4px 7px;
-  border-radius: 2px;
+  line-height: 40px;
   margin: 4px 0;
+  padding-left: 60px;
   color: var(--darkbase);
   background-color: white;
 }
diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index c648d12ac..de6506e17 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -1,14 +1,15 @@
-<nav .navbar.js-sticky-navbar>
+<div .navbar-container>
+  <nav .navbar.js-sticky-navbar>
 
-  <ul .navbar__list.list--inline>
-    $forall menuType <- menuTypes
-      $case menuType
-        $of NavbarRight (MenuItem label route _)
-          <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
-            <a .navbar__link href=@{route}>#{label}
-        $of NavbarSecondary (MenuItem label route _)
-          <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
-            <a .navbar__link href=@{route}>#{label}
-        $of _
+    <ul .navbar__list.list--inline>
+      $forall menuType <- menuTypes
+        $case menuType
+          $of NavbarRight (MenuItem label icon route _)
+            <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
+              <a .navbar__link href=@{route}>#{label}
+          $of NavbarSecondary (MenuItem label icon route _)
+            <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
+              <a .navbar__link href=@{route}>#{label}
+          $of _
 
-<div .navbar__pushdown>
+  <div .navbar__pushdown>