navbar rework, smooth breadcrumbs

src/Foundation.hs

@@ -88,9 +88,9 @@ data MenuItem = MenuItem
     }
 
 data MenuTypes
-    = NavbarLeft  { menuItem :: MenuItem }
-    | NavbarRight { menuItem :: MenuItem }
-    | NavbarExtra { menuItem :: MenuItem }
+    = NavbarAside     { menuItem :: MenuItem }
+    | NavbarRight     { menuItem :: MenuItem }
+    | NavbarExtra     { menuItem :: MenuItem }
     | NavbarSecondary { menuItem :: MenuItem }
 
 -- | A convenient synonym for creating forms.
@@ -285,21 +285,9 @@ defaultLinks = -- Define the menu items of the header.
       , menuItemRoute = HomeR
       , menuItemAccessCallback = return True
       }
-  , NavbarLeft $ MenuItem
-      { menuItemLabel = "Kurse"
-      , menuItemIcon = Just "book"
-      , menuItemRoute = CourseListR
-      , menuItemAccessCallback = return True
-      }
-  , NavbarLeft $ MenuItem
-      { menuItemLabel = "Users"
-      , menuItemIcon = Just "user"
-      , menuItemRoute = UsersR
-      , menuItemAccessCallback = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
-      }
   , NavbarRight $ MenuItem
       { menuItemLabel = "Profile"
-      , menuItemIcon = Just "user"
+      , menuItemIcon = Just "profile"
       , menuItemRoute = ProfileR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
@@ -315,6 +303,30 @@ defaultLinks = -- Define the menu items of the header.
       , menuItemRoute = AuthR LogoutR
       , menuItemAccessCallback = isJust <$> maybeAuthPair
       }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Aktuelle Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR -- should be CourseListActiveR or similar in the future
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Alte Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR -- should be CourseListInactiveR or similar in the future
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Veranstaltungen"
+      , menuItemIcon = Just "book"
+      , menuItemRoute = CourseListR
+      , menuItemAccessCallback = return True
+      }
+  , NavbarAside $ MenuItem
+      { menuItemLabel = "Benutzer"
+      , menuItemIcon = Just "user"
+      , menuItemRoute = UsersR
+      , menuItemAccessCallback = return True -- Creates a LOOP: (Authorized ==) <$> isAuthorized UsersR False
+      }
   ]
 
 defaultLinkLayout :: [MenuTypes] -> Widget -> Handler Html

src/Handler/Course.hs

@@ -64,7 +64,7 @@ getCourseListTermR tidini = do
           )
         ]
   let pageLinks =
-        [ NavbarLeft $ MenuItem
+        [ NavbarAside $ MenuItem
           { menuItemLabel = "Neuer Kurs"
           , menuItemIcon = Just "book"
           , menuItemRoute = CourseEditR

static/css/icons.css

@@ -19,6 +19,9 @@
 .glyphicon--book::before {
   content: '\e043';
 }
+.glyphicon--profile::before {
+  content: '\e019';
+}
 .glyphicon--user::before {
   content: '\e008';
 }

templates/widgets/asidenav.hamlet

@@ -4,7 +4,7 @@
       <ul .asidenav__list>
         $forall menuType <- menuTypes
           $case menuType
-            $of NavbarLeft (MenuItem label mIcon route _)
+            $of NavbarAside (MenuItem label mIcon route _)
               <li .asidenav__list-item :Just route == mcurrentRoute:.asidenav__list-item--active>
                 $if isJust mIcon
                   <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>

templates/widgets/asidenav.julius

@@ -3,11 +3,12 @@
 
   window.utils = window.utils || {};
 
-  window.utils.aside = function(el) {
+  window.utils.aside = function(el, bc) {
     var asideEl = el;
     var collapsed = false;
     var collClass = 'main__aside--collapsed';
     var animClass = 'main__aside--transitioning';
+    var breadcrumbs = bc;
 
     init();
     function init() {
@@ -15,6 +16,16 @@
       if (document.body.getBoundingClientRect().width < 999 || collLS) {
         asideEl.classList.add(collClass);
         collapsed = true;
+        if (breadcrumbs) {
+          breadcrumbs.style.left = '90px';
+          window.setTimeout(function() {
+            breadcrumbs.classList.add('breadcrumbs__container--animated');
+          }, 200);
+        }
+      } else {
+        if (breadcrumbs) {
+          breadcrumbs.classList.add('breadcrumbs__container--animated');
+        }
       }
     }
 
@@ -22,6 +33,9 @@
       if (collapsed && !hasClass() || !collapsed && hasClass()) {
         asideEl.classList.add(animClass);
         asideEl.classList.toggle(collClass, collapsed);
+        if (breadcrumbs) {
+          breadcrumbs.style.left = collapsed ? '90px' : '';
+        }
         window.localStorage.setItem('asidenavCollapsed', collapsed);
       }
     }
@@ -50,6 +64,6 @@
 
 document.addEventListener('DOMContentLoaded', function() {
 
-  utils.aside(document.querySelector('.main__aside'));
+  utils.aside(document.querySelector('.main__aside'), document.querySelector('.breadcrumbs__container'));
 
 });

templates/widgets/breadcrumbs.lucius

@@ -2,8 +2,10 @@
   position: absolute;
   color: white;
   left: 340px;
-  top: 7px;
+  bottom: 20px;
   z-index: 100;
+}
+.breadcrumbs__container--animated {
   transition: left .2s ease;
 }
 .breadcrumbs__container .breadcrumbs__link {

templates/widgets/navbar.hamlet

@@ -6,14 +6,16 @@
         $case menuType
           $of NavbarRight (MenuItem label mIcon route _)
             <li .navbar__list-item :Just route == mcurrentRoute:.navbar__list-item--active>
-              $if isJust mIcon
-                <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-              <a .navbar__link href=@{route}>#{label}
+              <a .navbar__link-wrapper href=@{route}>
+                $if isJust mIcon
+                  <div .glyphicon.glyphicon--#{fromMaybe "" 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>
-              $if isJust mIcon
-                <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
-              <a .navbar__link href=@{route}>#{label}
+              <a .navbar__link-wrapper href=@{route}>
+                $if isJust mIcon
+                  <div .glyphicon.glyphicon--#{fromMaybe "" mIcon}>
+                <div .navbar__link-label>#{label}
           $of _
 
     <!-- breadcrumbs -->

templates/widgets/navbar.lucius

@@ -1,12 +1,11 @@
 .navbar {
-  position: relative;
+  position: fixed;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: flex-end;
   width: 100%;
   height: var(--header-height);
-  line-height: var(--header-height);
   padding-right: 5vw;
   background: var(--darkbase); /* Old browsers */
   background: -moz-linear-gradient(bottom, var(--darkbase) 0%, #425d79 100%); /* FF3.6-15 */
@@ -18,39 +17,41 @@
   overflow: hidden;
 }
 
-.navbar .navbar__link {
-  position: relative;
-  display: inline-block;
-  height: 100%;
-  padding: 0 13px;
-  color: white;
-  text-transform: uppercase;
-}
-
-.navbar .navbar__link.glyphicon::before {
-  left: 50%;
-  top: -20px;
-  transform: translateX(-50%);
-  margin: 0;
-}
-
 .navbar__list-item {
   position: relative;
-  padding-top: 13px;
+  transition: background-color .1s ease;
 
-  > .glyphicon {
-    position: absolute;
+  .glyphicon {
+    position: relative;
     width: 100%;
+    height: 20px;
+    line-height: 20px;
   }
 
-  > .glyphicon::before {
-    height: 40px;
+  .glyphicon::before {
+    height: 20px;
     margin: 0;
     left: 50%;
     transform: translateX(-50%);
   }
 }
 
+.navbar .navbar__link-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 80px;
+  color: var(--whitebase);
+}
+
+.navbar__link-label {
+  transition: opacity .2s ease;
+  padding: 0 13px;
+  color: white;
+  text-transform: uppercase;
+}
+
 .navbar__list-item--secondary {
   margin-left: 20px;
   color: var(--greybase);
@@ -63,25 +64,31 @@
 .navbar__list-item--active {
   background-color: white;
   color: var(--darkbase);
+
+  .navbar__link-wrapper {
+    color: var(--darkbase);
+  }
 }
-.navbar__list-item--active > .navbar__link {
-  color: var(--darkbase);
+.navbar__list-item--active .navbar__link-wrapper {
   pointer-events: none;
 }
+.navbar__list-item--active .navbar__link-label {
+  color: var(--darkbase);
+}
 
 .navbar .navbar__list-item:not(.navbar__list-item--active):hover {
   background-color: var(--darkbase);
   color: var(--whitebase);
 }
-.navbar .navbar__list-item:not(.navbar__list-item--active):hover > .navbar__link {
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-wrapper {
   color: var(--whitebase);
 }
-.navbar__list-item--secondary > .navbar__link {
-  color: var(--greybase);
+.navbar .navbar__list-item:not(.navbar__list-item--active):hover .navbar__link-label {
+  color: var(--whitebase);
 }
-
-.navbar__link {
-  transition: opacity .2s ease;
+.navbar__list-item--secondary .navbar__link-wrapper,
+.navbar__list-item--secondary .navbar__link-label {
+  color: var(--greybase);
 }
 
 .navbar--sticky {
@@ -89,23 +96,24 @@
   top: 0;
   left: 0;
   height: var(--header-height-collapsed);
-  line-height: var(--header-height-collapsed);
   z-index: 100;
   transition: height 0.2s ease, line-height 0.2s ease;
 
   .navbar__link {
-    opacity: 0;
+    /*opacity: 0;*/
   }
 
-  .breadcrumbs__container {
-    top: 0px;
+  .breadcrumbs__container--animated {
+    bottom: 7px;
+    transition: all .2s ease;
   }
 }
 .navbar__pushdown {
-  display: none;
-  background-color: var(--darkbase);
+  /*display: none;*/
   height: var(--header-height);
+  transition: height .2s ease;
 }
 .navbar--sticky + .navbar__pushdown {
   display: block;
+  height: var(--header-height-collapsed);
 }