make asidenav scrollable

src/Foundation.hs

@@ -1002,7 +1002,6 @@ siteLayout' headingOverride widget = do
       addStylesheet $ StaticR css_fonts_css
       addStylesheet $ StaticR css_utils_tabber_scss
       addStylesheet $ StaticR css_utils_alerts_scss
-      addStylesheet $ StaticR css_utils_asidenav_scss
       $(widgetFile "default-layout")
       $(widgetFile "standalone/modal")
       $(widgetFile "standalone/showHide")

static/js/utils/asidenav.js

@@ -6,10 +6,16 @@
   var FAVORITES_BTN_CLASS = 'navbar__list-item--favorite';
   var FAVORITES_BTN_ACTIVE_CLASS = 'navbar__list-item--active';
   var ASIDENAV_EXPANDED_CLASS = 'main__aside--expanded';
+  var ASIDENAV_LIST_ITEM_CLASS = 'asidenav__list-item';
+  var ASIDENAV_SUBMENU_CLASS = 'asidenav__nested-list-wrapper';
 
   window.utils.aside = function(asideEl) {
 
-    function init() {
+    if (!asideEl) {
+      throw new Error('asideEl not defined');
+    }
+
+    function initFavoritesButton() {
       var favoritesBtn = document.querySelector('.' + FAVORITES_BTN_CLASS);
       favoritesBtn.addEventListener('click', function(event) {
         favoritesBtn.classList.toggle(FAVORITES_BTN_ACTIVE_CLASS);
@@ -17,6 +23,38 @@
         event.preventDefault();
       }, true);
     }
-    init();
+
+    function initAsidenavSubmenus() {
+      // find list items first (not nested), and then look for link wrappers inside each list item
+      var asidenavLinksWithSubmenus = Array.from(asideEl.querySelectorAll('.' + ASIDENAV_LIST_ITEM_CLASS))
+        .map(function(listItem) {
+          var submenu = listItem.querySelector('.' + ASIDENAV_SUBMENU_CLASS);
+          return { listItem, submenu };
+        }).filter(function(union) {
+          return union.submenu !== null;
+        });
+
+      asidenavLinksWithSubmenus.forEach(function(union) {
+        union.listItem.addEventListener('mouseover', createMouseoverHandler(union));
+      });
+    }
+
+    function createMouseoverHandler(union) {
+      return function mouseoverHanlder(event) {
+        var rectListItem = union.listItem.getBoundingClientRect();
+        var rectSubMenu = union.submenu.getBoundingClientRect();
+
+        union.submenu.style.left = (rectListItem.left + rectListItem.width) + 'px';
+        if (window.innerHeight - rectListItem.top < rectSubMenu.height) {
+          union.submenu.style.top = (rectListItem.top + rectListItem.height - rectSubMenu.height) + 'px';
+        } else {
+          union.submenu.style.top = rectListItem.top + 'px';
+        }
+
+      };
+    }
+
+    initFavoritesButton();
+    initAsidenavSubmenus();
   };
 })();

templates/standalone/showHide.lucius

@@ -1,7 +1,3 @@
-.js-show-hide {
-  position: relative;
-}
-
 .js-show-hide__toggle {
   position: relative;
   cursor: pointer;

templates/widgets/asidenav/asidenav.hamlet

@@ -16,10 +16,11 @@ $newline never
               <a .asidenav__link-wrapper href=@{courseRoute}>
                 <div .asidenav__link-shorthand>#{courseShorthand}
                 <div .asidenav__link-label>#{courseName}
-              <ul .asidenav__nested-list.list--iconless>
-                $forall (MenuItem{menuItemType, menuItemLabel}, route) <- pageActions
-                  $case menuItemType
-                    $of PageActionPrime
-                      <li .asidenav__nested-list-item>
-                        <a .asidenav__link-wrapper href=#{route}>_{menuItemLabel}
-                    $of _
+              <div .asidenav__nested-list-wrapper>
+                <ul .asidenav__nested-list.list--iconless>
+                  $forall (MenuItem{menuItemType, menuItemLabel}, route) <- pageActions
+                    $case menuItemType
+                      $of PageActionPrime
+                        <li .asidenav__nested-list-item>
+                          <a .asidenav__link-wrapper href=#{route}>_{menuItemLabel}
+                      $of _

templates/widgets/asidenav/asidenav.lucius

@@ -4,12 +4,11 @@
   z-index: 1;
   top: 0;
   left: 0;
-  flex: 0 0 0;
-  flex-basis: var(--asidenav-width-lg, 20%);
-  min-height: calc(100% - var(--header-height));
-  transition: all .2s ease-out;
   width: var(--asidenav-width-lg, 20%);
   height: 100%;
+  flex: 0 0 0;
+  flex-basis: var(--asidenav-width-lg, 20%);
+  transition: all .2s ease-out;
 
   &::before {
     position: absolute;
@@ -72,6 +71,10 @@
 
 .asidenav {
   color: var(--color-font);
+  min-height: calc(100% - var(--header-height));
+  height: 400px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .asidenav__box {
@@ -183,9 +186,7 @@
 /* LIST-ITEM */
 
 .asidenav__list-item {
-  position: relative;
   color: var(--color-font);
-  min-height: 50px;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -207,10 +208,8 @@
       text-shadow: none;
     }
 
-    .asidenav__nested-list {
-      transform: translateX(100%);
-      opacity: 1;
-      width: 200px;
+    .asidenav__nested-list-wrapper {
+      display: block;
     }
   }
 }
@@ -242,7 +241,7 @@
   display: flex;
   flex: 1;
   align-items: center;
-  padding: 7px 10px;
+  padding: 8px 3px;
   justify-content: flex-start;
   color: var(--color-font);
   width: 100%;
@@ -258,17 +257,17 @@
 }
 
 /* hover sub-menus */
-.asidenav__nested-list {
+.asidenav__nested-list-wrapper {
   position: absolute;
-  top: 0;
-  right: 0;
+  z-index: 10;
+  display: none;
   color: var(--color-font);
-  transform: translateX(0);
-  opacity: 0;
-  width: 0;
-  overflow: hidden;
-  z-index: -1;
-  box-shadow: 0 0 13px rgba(0, 0, 0, 0.4);
+  background-color: var(--color-grey-light);
+  box-shadow: 1px 1px 1px 0px var(--color-grey);
+}
+
+.asidenav__nested-list {
+  min-width: 200px;
 }
 
 @media (max-width: 425px) {
@@ -280,19 +279,16 @@
 
 .asidenav__nested-list-item {
   position: relative;
-  color: var(--color-lightwhite);
-  background-color: var(--color-dark);
 
   &:hover {
-    background-color: var(--color-darker);
+    background-color: var(--color-lightwhite);
   }
 
   .asidenav__link-wrapper {
     padding-left: 13px;
     padding-right: 13px;
-    border-left: 20px solid white;
     transition: all .2s ease;
-    color: var(--color-lightwhite);
+    color: var(--color-font);
   }
 }