From ecdf194f7497459f8ca4d73f7ed05207492270b9 Mon Sep 17 00:00:00 2001
From: Felix Hamann <felix.hamann@campus.lmu.de>
Date: Sun, 1 Jul 2018 23:11:46 +0200
Subject: [PATCH] made navbar scrollable on mobile devices and added
 favorites-list-item

---
 templates/widgets/navbar.hamlet | 28 +++++++++++++++------------
 templates/widgets/navbar.lucius | 34 ++++++++++++++++++++++++++++++++-
 2 files changed, 49 insertions(+), 13 deletions(-)

diff --git a/templates/widgets/navbar.hamlet b/templates/widgets/navbar.hamlet
index 9a67a13fe..359bd1b17 100644
--- a/templates/widgets/navbar.hamlet
+++ b/templates/widgets/navbar.hamlet
@@ -5,14 +5,20 @@ $newline never
     <a href="/" .navbar__logo>
 
     <ul .navbar__list.list--inline.navbar__list-left>
-        $forall menuType <- menuTypes
-          $case menuType
-            $of NavbarAside (MenuItem label mIcon route _)
-              <li .navbar__list-item :highlight route:.navbar__list-item--active>
-                <a .navbar__link-wrapper href=@{route}>
-                  <i .fas.fa-#{fromMaybe "none" mIcon}>
-                  <div .navbar__link-label>#{label}
-            $of _
+      $# manually add favorites to navbar for small screens
+      <li .navbar__list-item.navbar__list-item--favorite>
+        <a .navbar__link-wrapper href="#">
+          <i .fas.fa-star>
+          <div .navbar__link-label> Favorites
+
+      $forall menuType <- menuTypes
+        $case menuType
+          $of NavbarAside (MenuItem label mIcon route _)
+            <li .navbar__list-item :highlight route:.navbar__list-item--active>
+              <a .navbar__link-wrapper href=@{route}>
+                <i .fas.fa-#{fromMaybe "none" mIcon}>
+                <div .navbar__link-label>#{label}
+          $of _
 
     <ul .navbar__list.list--inline>
       $forall menuType <- menuTypes
@@ -20,14 +26,12 @@ $newline never
           $of NavbarRight (MenuItem label mIcon route _)
             <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
               <a .navbar__link-wrapper href=@{route}>
-                $if isJust mIcon
-                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                <i .fas.fa-#{fromMaybe "none" mIcon}>
                 <div .navbar__link-label>#{label}
           $of NavbarSecondary (MenuItem label mIcon route _)
             <li .navbar__list-item.navbar__list-item--secondary :Just route == mcurrentRoute:.navbar__list-item--active>
               <a .navbar__link-wrapper href=@{route}>
-                $if isJust mIcon
-                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                <i .fas.fa-#{fromMaybe "none" mIcon}>
                 <div .navbar__link-label>#{label}
           $of _
 
diff --git a/templates/widgets/navbar.lucius b/templates/widgets/navbar.lucius
index 09466c022..3e946b7b5 100644
--- a/templates/widgets/navbar.lucius
+++ b/templates/widgets/navbar.lucius
@@ -17,6 +17,8 @@
   overflow: hidden;
   box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
   transition: all .2s cubic-bezier(0.03, 0.43, 0.58, 1);
+  width: 100%;
+  overflow: auto;
 }
 
 @media (max-width: 768px) {
@@ -158,12 +160,21 @@
   }
 }
 
+@media (max-width: 425px) {
+
+  .navbar__list {
+    + .navbar__list {
+      margin-left: 0;
+    }
+  }
+}
+
 /* list item */
 .navbar__list-item {
   position: relative;
   transition: background-color .1s ease;
 
-  + .navbar__list-item {
+  &:not(.navbar__list-item--favorite) + .navbar__list-item {
     margin-left: 12px;
   }
 
@@ -187,6 +198,10 @@
 
   .navbar__list-item {
     width: 50px;
+
+    &:not(.navbar__list-item--favorite) + .navbar__list-item {
+      margin-left: 0;
+    }
   }
 }
 
@@ -202,6 +217,23 @@
   }
 }
 
+/* "Favorites" list item, only visible on small screens */
+.navbar__list {
+
+  .navbar__list-item--favorite {
+    display: none;
+  }
+}
+
+@media (max-width: 425px) {
+
+  .navbar__list {
+    .navbar__list-item--favorite {
+      display: inline-block;
+    }
+  }
+}
+
 .navbar__list-item--secondary {
   margin-left: 20px;
   color: var(--color-grey);