From d9cc47602ccd1e0aa5dffdf446df958241e55006 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Mon, 2 Jul 2018 00:06:35 +0200
Subject: [PATCH] slide-in asidenav on mobile devices and logo in primary color

---
 templates/widgets/asidenav.julius | 14 +++++++++++++-
 templates/widgets/asidenav.lucius | 32 +++++++++++++++++++++++++++----
 templates/widgets/navbar.lucius   |  9 ++++++---
 3 files changed, 47 insertions(+), 8 deletions(-)

diff --git a/templates/widgets/asidenav.julius b/templates/widgets/asidenav.julius
index 3fd0f7d69..18b55b952 100644
--- a/templates/widgets/asidenav.julius
+++ b/templates/widgets/asidenav.julius
@@ -3,7 +3,17 @@
 
   window.utils = window.utils || {};
 
-  window.utils.aside = function(asideEl) { };
+  window.utils.aside = function(asideEl) {
+
+    function init() {
+      var favoritesBtn = document.querySelector('.navbar__list-item--favorite');
+      favoritesBtn.addEventListener('click', function(event) {
+        asideEl.classList.toggle('main__aside--expanded');
+        event.preventDefault();
+      }, true);
+    }
+    init();
+  };
 })();
 
 document.addEventListener('DOMContentLoaded', function() {
@@ -19,4 +29,6 @@ document.addEventListener('DOMContentLoaded', function() {
     });
   });
 
+  window.utils.aside(asidenavEl);
+
 });
diff --git a/templates/widgets/asidenav.lucius b/templates/widgets/asidenav.lucius
index 5db72152f..33ba5f653 100644
--- a/templates/widgets/asidenav.lucius
+++ b/templates/widgets/asidenav.lucius
@@ -19,7 +19,23 @@
 @media (max-width: 425px) {
 
   .main__aside {
-    display: none;
+    position: fixed;
+    top: var(--header-height-collapsed);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100% !important;
+    width: 100%;
+    z-index: 5;
+    box-shadow: 0 0 13px var(--color-dark);
+    white-space: nowrap;
+    overflow: hidden;
+    transform: translateX(0);
+    transition: transform .2s ease-out;
+
+    &:not(.main__aside--expanded) {
+      transform: translateX(-110%);
+    }
   }
 }
 
@@ -36,6 +52,9 @@
   margin-top: 30px;
   background-color: transparent;
   transition: all .2s ease;
+  padding: 30px 13px 10px;
+  margin: 0;
+  background-color: var(--color-darker);
 }
 
 .asidenav__list-item {
@@ -129,6 +148,13 @@
   z-index: -1;
 }
 
+@media (max-width: 425px) {
+
+  .asidenav__nested-list {
+    display: none;
+  }
+}
+
 .asidenav__nested-list-item {
   position: relative;
   color: var(--color-lightwhite);
@@ -148,7 +174,7 @@
 }
 
 /* STATE COLLAPSED */
-@media (max-width: 768px) {
+@media (max-width: 768px) and (min-width: 425px) {
 
   .main__aside {
     width: 50px;
@@ -161,8 +187,6 @@
       font-size: 18px;
       text-align: center;
       padding: 10px 1px;
-      margin: 0;
-      background-color: var(--color-darker);
     }
 
     .asidenav__link-shorthand {
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 3e946b7b5..c597176e4 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -57,6 +57,7 @@
     height: calc(100% - 4px);
     padding: 0 6px 4px;
     box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+    background-color: var(--color-primary);
   }
 
   &::after {
@@ -71,6 +72,7 @@
     height: calc(100% - 4px);
     padding: 0 6px 4px;
     box-shadow: 0 0 0 1px inset var(--color-lmu-box-border);
+    background-color: var(--color-primary);
   }
 }
 
@@ -140,7 +142,7 @@
 @media (max-width: 500px) {
 
   .navbar__link-label {
-    display: none;
+    font-size: 12px;
   }
 }
 
@@ -197,7 +199,7 @@
 @media (max-width: 500px) {
 
   .navbar__list-item {
-    width: 50px;
+    min-width: 60px;
 
     &:not(.navbar__list-item--favorite) + .navbar__list-item {
       margin-left: 0;
@@ -222,6 +224,7 @@
 
   .navbar__list-item--favorite {
     display: none;
+    background-color: var(--color-primary);
   }
 }
 
@@ -273,7 +276,7 @@
   color: var(--color-dark);
 }
 
-.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
+.navbar .navbar__list-item:not(.navbar__list-item--active):not(.navbar__list-item--favorite):hover .navbar__link-wrapper {
   background-color: var(--color-darker);
   color: var(--color-lightwhite);
 }