smoother themed asidenav experience

templates/widgets/asidenav.julius

@@ -4,7 +4,7 @@
   window.utils = window.utils || {};
 
   // Defines a function to turn an element into an interactive aside-navigation.
-  // If the small is smaller than 999px the navigation is automatically
+  // If the screen is smaller than 999px the navigation is automatically
   // collapsed - even when dynamically resized (e.g. switching from portatit
   // to landscape).
   // The can user may also manually collapse and expand the navigation by
@@ -16,7 +16,7 @@
     // (potentially happening) initial collapse of the asidenav
     // goes unnoticed by the user.
     var animClass = 'main__aside--transitioning';
-    var aboveCollapsedNav = false;
+    var hoveringAboveCollapsedNav = false;
 
     init();
     function init() {
@@ -62,17 +62,21 @@
         if (!hasCollapsedClass()) {
           return false;
         }
-        aboveCollapsedNav = true;
+        hoveringAboveCollapsedNav = true;
         window.setTimeout(function() {
-          if (aboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
+          if (hoveringAboveCollapsedNav && !document.body.classList.contains('touch-supported')) {
             asideEl.classList.add('pseudo-hover');
           }
-        }, 800);
+        }, 200);
       }, false);
 
       asideEl.addEventListener('mouseleave', function(event) {
-        aboveCollapsedNav = false;
+        hoveringAboveCollapsedNav = false;
-        asideEl.classList.remove('pseudo-hover');
+        window.setTimeout(function() {
+          if (!hoveringAboveCollapsedNav) {
+            asideEl.classList.remove('pseudo-hover');
+          }
+        }, 200);
       }, false);
     }
   };
@@ -82,8 +86,34 @@ document.addEventListener('DOMContentLoaded', function() {
 
     utils.aside(document.querySelector('.main__aside'));
 
-    document.querySelector('#theme-selector').addEventListener('change', function(event) {
+    // remove me before flight:
-      document.body.className = 'theme--' + event.target.value;
+    // EXPERIMENTAL
+    var selector = document.querySelector('#theme-selector');
+    var options = Array.from(selector.querySelectorAll('option'))
+      .reduce(function(acc, optEl) {
+          if (!acc.includes(optEl.value)) {
+            acc.push(optEl.value);
+          }
+          return acc;
+        },
+        []);
+    selector.addEventListener('change', function(event) {
+      setTheme(event.target.value);
     });
 
+    function setTheme(theme) {
+      document.body.className = 'theme--' + theme;
+    }
+
+    setInterval(function() {
+      setTheme(randomOption());
+    }, 20000);
+
+    function randomOption() {
+      return options[Math.floor(Math.random() * options.length)];
+    }
+
+    // initial theme
+    setTheme(randomOption());
+
 });

templates/widgets/asidenav.lucius

@@ -56,6 +56,7 @@
     .asidenav__link-shorthand {
       transform: scale(1.05, 1.0);
       transform-origin: right;
+      text-shadow: none;
     }
 
     > .asidenav__link-wrapper {
@@ -81,6 +82,7 @@
   .asidenav__link-shorthand {
     transform: scale(1.05, 1.0);
     transform-origin: right;
+    text-shadow: none;
   }
 }
 
@@ -114,6 +116,7 @@
   font-size: 40px;
   text-transform: uppercase;
   transition: transform .2s ease;
+  text-shadow: 1px 1px 4px rgba(30, 30, 30, 0.8);
 }
 
 .asidenav__link-label {
@@ -208,7 +211,6 @@
     font-size: 18px;
     text-align: center;
     margin-bottom: 0;
-    background-color: var(--color-lightwhite);
   }
 
   .asidenav__link-shorthand {
@@ -232,6 +234,19 @@
     justify-content: center;
   }
 
+  .asidenav__list-item:hover {
+
+    > .asidenav__link-wrapper {
+      color: var(--color-dark);
+      background-color: var(--color-lightwhite);
+    }
+  }
+
+  .asidenav__link-wrapper {
+    color: var(--color-lightwhite);
+    background-color: var(--color-dark);
+  }
+
   .asidenav__link-label {
     padding-left: 0;
   }