Left nav redesign

src/css/nav.css

@@ -1,9 +1,10 @@
 
 .nav-container {
   --nav-x-padding: 10px;
+  --nav-item-padding-left: 14px;
+  --nav-transition-duration: 300ms;
 
   position: fixed;
-  margin-top: 30px;
   left: 0;
   width: 100%;
   font-size: calc(16.5 / var(--rem-base) * 1rem);
@@ -12,6 +13,7 @@
   font-family: var(--nav-font-family);
   max-width: 300px;
   background-color: #fff;
+  border-right: 1px solid var(--panel-border-color);
 }
 
 #hide-nav {
@@ -42,16 +44,13 @@
   visibility: visible;
 }
 
-.nav-item.is-active > a {
-  color: var(--accent);
-}
-
 .nav {
   background-color: #fff;
   position: relative;
   top: 0;
   height: var(--nav-height);
   overflow-y: auto;
+  overflow-x: hidden;
   width: 100%;
 }
 
@@ -88,30 +87,43 @@ html.is-clipped--nav {
 }
 
 .nav-menu a {
-  color: inherit;
+  color: var(--secondary-text);
 }
 
 .nav-list {
   padding: 0;
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  will-change: height;
+  transition: height var(--nav-transition-duration);
+}
+
+.nav-menu > .nav-list {
+  padding: 0;
+  margin-top: 0;
+  height: auto;
 }
 
 .nav-item {
   text-indent: 0;
   line-height: 1.6;
   position: relative;
   list-style: none;
-  padding: 2px 10px;
+  padding: 2px 0 2px var(--nav-item-padding-left);
 }
 
 .nav-item[data-depth="0"] {
+  font-size: 16px;
+  font-weight: 600;
   line-height: 2.1;
   padding-top: 5px;
   padding-bottom: 5px;
 }
 
-.nav-menu > .nav-list {
-  padding: 0;
-  margin-top: 0;
+.nav-item:not([data-depth="0"]) {
+  font-size: 14px;
+  font-weight: 400;
 }
 
 .nav-item > .nav-text {
@@ -122,24 +134,23 @@ html.is-clipped--nav {
   background: #fff;
 }
 
-.nav-item:not(.is-active) > .nav-list {
-  display: none;
-}
-
 .components:not(.is-active),
 .versions:not(.is-active) {
   display: none;
 }
 
 .nav-item-toggle {
   background: transparent url(../img/caret-blue.svg) center no-repeat;
+  transform: rotate(-90deg);
+  transition: transform var(--nav-transition-duration);
   border: none;
   outline: none;
   line-height: inherit;
   position: absolute;
   height: calc(var(--nav-line-height) * 1em);
   width: 30px;
-  padding: 0 5px;
+  padding: 0;
+  right: 0;
 }
 
 .nav-item[data-depth="0"] > .nav-item-toggle {
@@ -152,24 +163,26 @@ html.is-clipped--nav {
 }
 
 .nav-item.is-active > .nav-item-toggle {
-  transform: rotate(-180deg);
+  transform: rotate(0);
 }
 
 .is-current-page {
   background-color: var(--info-light);
   border-radius: 10px;
-}
-
-.nav-link,
-.nav-text {
-  padding-right: 15px;
+  font-weight: 600;
 }
 
 .is-current-page > .nav-link,
 .is-current-page > .nav-text {
   color: var(--accent);
 }
 
+.nav-link,
+.nav-text {
+  padding-right: 15px;
+  position: relative;
+}
+
 .nav-link.enterprise::after {
   content: 'Enterprise';
   background: var(--primary-dark);
@@ -207,8 +220,8 @@ html.is-clipped--nav {
   .nav-container {
     position: static;
     visibility: visible;
-    margin-top: 0;
     padding-bottom: 60px;
+    border-right: none;
   }
 
   #hide-nav {
@@ -220,10 +233,6 @@ html.is-clipped--nav {
     box-shadow: none;
     position: sticky;
   }
-
-  .nav-item-toggle {
-    right: 0;
-  }
 }
 
 /* Version picker */

src/css/vars.css

@@ -143,10 +143,7 @@
   --drawer-height: var(--toolbar-height);
   --body-top: var(--navbar-height);
   --body-min-height: calc(100vh - var(--body-top));
-  --nav-height: calc(var(--body-min-height) - var(--toolbar-height));
-  --nav-height--desktop: var(--body-min-height);
-  --nav-panel-height: calc(var(--nav-height) - var(--drawer-height));
-  --nav-panel-height--desktop: calc(var(--nav-height--desktop) - var(--drawer-height));
+  --nav-height: var(--body-min-height);
   --nav-width: calc(270 / var(--rem-base) * 1rem);
   --toc-top: calc(var(--body-top) + var(--toolbar-height));
   --toc-content-height: calc(100vh - var(--toc-top) - 2.5rem);

src/js/01-nav.js

@@ -3,6 +3,7 @@
   var SECT_CLASS_RX = /^sect(\d)$/
   const VERSION_PICKER_ACTIVE_TOGGLE_NAME = 'data-active-toggle'
   const VERSION_PICKER_TOGGLE_NAME = 'data-toggle-value'
+  let currentNavToggleTimer = 0
 
   function versionPickerToggleHandler () {
     const value = this.getAttribute(VERSION_PICKER_TOGGLE_NAME)
@@ -66,6 +67,13 @@
       }
     })
 
+    find(menuPanel, '.nav-item.is-active').forEach(function (navItem) {
+      const list = navItem.querySelector('.nav-list')
+      if (list) {
+        list.style.height = 'auto'
+      }
+    })
+
     // NOTE prevent text from being selected by double click
     menuPanel.addEventListener('mousedown', function (e) {
       if (e.detail > 1) e.preventDefault()
@@ -127,7 +135,29 @@
     }
 
     function toggleActive () {
+      clearTimeout(currentNavToggleTimer)
+
       this.classList.toggle('is-active')
+
+      if (this.classList.contains('is-active')) {
+        const list = this.querySelector('.nav-list')
+        const height = list.scrollHeight
+        list.style.height = `${height}px`
+
+        // to support resizing
+        currentNavToggleTimer = setTimeout(() => {
+          if (this.classList.contains('is-active')) {
+            list.style.height = 'auto'
+          }
+        }, 300)
+      } else {
+        const list = this.querySelector('.nav-list')
+        const height = list.scrollHeight
+        list.style.height = `${height}px`
+        currentNavToggleTimer = setTimeout(() => {
+          this.querySelector('.nav-list').style.height = ''
+        }, 0)
+      }
     }
 
     function showNav (e) {