asidenav not collapsable anymore

templates/widgets/asidenav.hamlet

@@ -30,15 +30,4 @@ $newline never
                       <a .asidenav__link-wrapper href=@{menuItemRoute}>#{menuItemLabel}
                   $of _
 
-    <div .asidenav__box>
-      <h3 .asidenav__box-title>
-        Themes (dev)
-      <select #theme-selector>
-        <option value="default">Default Blue
-        <option value="neutral-blue">Neutral Blue
-        <option value="aberdeen-reds">Aberdeen Reds
-        <option value="mint-green">Mint Green
-        <option value="sky-love">Sky Love
-
-
   <div .asidenav__toggler>

templates/widgets/asidenav.julius

@@ -84,41 +84,6 @@
 
 document.addEventListener('DOMContentLoaded', function() {
 
-    utils.aside(document.querySelector('.main__aside'));
+    // utils.aside(document.querySelector('.main__aside'));
-
-    // remove me before flight:
-    // EXPERIMENTAL
-    var selector = document.querySelector('#theme-selector');
-    var lsTheme = window.localStorage.getItem('theme');
-    setTheme(lsTheme || 'default');
-    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) {
-      window.localStorage.setItem('theme', theme);
-      document.body.className = 'theme--' + theme;
-    }
-
-    // random theme on loading and again every 20 seconds
-    // setInterval(function() {
-    //   setTheme(randomOption());
-    // }, 20000);
-
-    // function randomOption() {
-    //   return options[Math.floor(Math.random() * options.length)];
-    // }
-
-    // // initial theme
-    // setTheme(randomOption());
 
 });

templates/widgets/asidenav.lucius

@@ -1,39 +1,26 @@
 .main__aside {
-  position: relative;
+  position: absolute;
   background-color: var(--color-dark);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
   z-index: 1;
   flex: 0 0 300px;
-}
+  height: calc(100% - 80px);
-.main__aside--transitioning {
+  transition: all .2s ease-out;
-  transition: flex-basis .2s ease;
+  width: 300px;
-}
+
-.main__aside--transitioning .asidenav__box{
+  ~ .main__content {
-  transition: opacity .2s ease;
+    padding-left: 300px;
+    transition: padding-left .2s ease-out;
+  }
 }
 
 .asidenav {
   width: 300px;
   color: white;
+}
 
-  .js-show-hide__target {
+.asidenav__box {
-    overflow: visible;
+  transition: opacity .2s ease;
-  }
-  .js-show-hide__toggle::before {
-    top: 14px;
-    right: 12px;
-    left: auto !important;
-  }
-
-  .js-show-hide__toggle:hover::before,
-  .js-show-hide--collapsed .js-show-hide__toggle::before {
-    top: 10px !important;
-    right: 8px !important;
-  }
-  .js-show-hide--collapsed .js-show-hide__toggle:hover::before {
-    top: 14px !important;
-    right: 12px !important;
-  }
 }
 
 .asidenav__box-title {
@@ -46,7 +33,6 @@
 .asidenav__list-item {
   position: relative;
   color: var(--color-lightwhite);
-  margin: 4px 0;
   padding-left: 10px;
 
   &:hover {
@@ -69,6 +55,10 @@
       width: 200px;
     }
   }
+
+  + .asidenav__list-item {
+    margin-top: 4px;
+  }
 }
 
 .asidenav__list-item--active {
@@ -88,8 +78,8 @@
 .asidenav__link-wrapper {
   position: relative;
   display: flex;
-  height: 43px;
   align-items: center;
+  padding: 7px 0;
   justify-content: flex-start;
   color: var(--color-lightwhite);
   z-index: 1;
@@ -109,6 +99,7 @@
 }
 
 .asidenav__link-label {
+  line-height: 1;
   padding-left: 13px;
 }
 
@@ -139,15 +130,8 @@
       background-color: white;
       color: var(--color-link);
     }
-
-    .asidenav__nested-list {
-      transform: translateX(100%);
-      opacity: 1;
-      width: 200px;
-    }
   }
-
+    .asidenav__link-wrapper {
-  .asidenav__link-wrapper {
     padding-left: 13px;
     padding-right: 13px;
     border-left: 20px solid white;
@@ -156,100 +140,87 @@
   }
 }
 
-.asidenav__toggler {
+/* STATE COLLAPSED */
-  position: absolute;
+@media (max-width: 768px) {
-  bottom: 20px;
-  height: 50px;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color .2s ease;
-  border-top: 1px solid var(--color-lightwhite);
-  border-bottom: 1px solid var(--color-lightwhite);
-  cursor: pointer;
 
-  &::before {
+  .main__aside {
-    content: '\e079';
-    display: block;
-    font-family: 'Glyphicons Halflings';
-    color: var(--color-lightwhite);
-  }
-
-  &:hover {
-    background-color: var(--color-light);
-  }
-}
-
-.main__aside--collapsed {
-  width: 50px;
-  flex-basis: 50px;
-  overflow: hidden;
-
-  &.pseudo-hover {
-    overflow: visible;
-  }
-
-  .asidenav__toggler::before {
-    content: '\e080';
-  }
-
-  .asidenav__box-title {
     width: 50px;
-    padding: 1px;
+    flex-basis: 50px;
-    font-size: 18px;
+    overflow: hidden;
-    text-align: center;
+    height: calc(100% - 50px);
-    margin-bottom: 0;
-  }
 
-  .asidenav__link-shorthand {
-    display: flex;
-    position: static;
-    // TODO: make shorthands in collapsed beautiful *.*
-    // background-color: var(--color-dark);
-    // color: var(--color-lightwhite);
-    height: 50px;
-    width: 50px;
-    text-align: center;
-    opacity: 1;
-    font-size: 15px;
-    line-height: 1em;
-    margin-right: 13px;
-    flex-shrink: 0;
-    padding: 1px;
-    outline: 1px solid white;
-    text-transform: uppercase;
-    word-break: break-all;
-    align-items: center;
-    justify-content: center;
-  }
 
-  .asidenav__list-item {
+    ~ .main__content {
-    padding-left: 0;
+      padding-left: 50px;
-  }
-
-  .asidenav__list-item:hover {
-
-    > .asidenav__link-wrapper {
-      color: var(--color-dark);
-      background-color: var(--color-lightwhite);
     }
-  }
 
-  .asidenav__link-wrapper {
+    &.pseudo-hover {
-    color: var(--color-lightwhite);
+      overflow: visible;
-    // background-color: var(--color-dark);
+      flex-basis: 300px;
-  }
+    }
 
-  .asidenav__link-label {
+    .asidenav__box-title {
-    padding-left: 0;
+      width: 50px;
-  }
+      padding: 1px;
+      font-size: 18px;
+      text-align: center;
+      margin-bottom: 0;
+    }
 
-  .asidenav__list-item--active {
+    .asidenav__link-shorthand {
+      display: flex;
+      position: static;
+      // TODO: make shorthands in collapsed beautiful *.*
+      // background-color: var(--color-dark);
+      // color: var(--color-lightwhite);
+      height: 50px;
+      width: 50px;
+      text-align: center;
+      opacity: 1;
+      font-size: 15px;
+      line-height: 1em;
+      margin-right: 13px;
+      flex-shrink: 0;
+      padding: 1px;
+      outline: 1px solid white;
+      text-transform: uppercase;
+      word-break: break-all;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .asidenav__list-item {
+      padding-left: 0;
+
+      + .asidenav__list-item {
+        margin: 0;
+      }
+    }
+
+    .asidenav__list-item:hover {
+
+      > .asidenav__link-wrapper {
+        color: var(--color-dark);
+        background-color: var(--color-lightwhite);
+      }
+    }
 
     .asidenav__link-wrapper {
-      background-color: var(--color-lightwhite);
+      color: var(--color-lightwhite);
-      color: var(--color-dark);
+      padding: 0;
+      // background-color: var(--color-dark);
+    }
+
+    .asidenav__link-label {
+      padding-left: 0;
+    }
+
+    .asidenav__list-item--active {
+
+      .asidenav__link-wrapper {
+        background-color: var(--color-lightwhite);
+        color: var(--color-dark);
+      }
     }
   }
 }