resolves #59 add expand/collapse all toggle to nav (PR #60)

Author: mojavelinux

src/css/nav.css

@@ -103,12 +103,34 @@
   position: relative;
 }
 
+.nav-menu-toggle {
+  background: transparent url(../img/octicons-24.svg#view-unfold) no-repeat center;
+  border: none;
+  outline: none;
+  width: 0.9rem;
+  height: 0.9rem;
+  opacity: 0.5;
+  position: sticky;
+  top: 0.8075rem;
+  margin-right: -0.5rem;
+  float: right;
+  visibility: hidden;
+}
+
+.nav-menu-toggle.is-active {
+  background-image: url(../img/octicons-24.svg#view-fold);
+}
+
+.nav-panel-menu.is-active:hover .nav-menu-toggle {
+  visibility: visible;
+}
+
 .nav-menu h3.title {
   color: var(--nav-heading-font-color);
-  font-size: 1.05em;
+  font-size: 0.9rem;
   font-weight: var(--body-font-weight-bold);
-  margin: 0;
-  padding-top: 0.25em;
+  margin: 0.15rem 0 0;
+  padding: 0;
 }
 
 .nav-menu a {

src/img/octicons-24.svg

@@ -22,6 +22,19 @@
     menuPanel.scrollTop = 0
   }
 
+  menuPanel.querySelector('.nav-menu-toggle').addEventListener('click', function () {
+    var collapse = !this.classList.toggle('is-active')
+    find(menuPanel, '.nav-item > .nav-item-toggle').forEach(function (btn) {
+      collapse ? btn.parentElement.classList.remove('is-active') : btn.parentElement.classList.add('is-active')
+    })
+    if (currentPageItem) {
+      if (collapse) activateCurrentPath(currentPageItem, false)
+      scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link'))
+    } else if (collapse) {
+      menuPanel.scrollTop = 0
+    }
+  })
+
   find(menuPanel, '.nav-item-toggle').forEach(function (btn) {
     var li = btn.parentElement
     btn.addEventListener('click', toggleActive.bind(li))
@@ -87,12 +100,13 @@
     window.addEventListener('hashchange', onHashChange)
   }
 
-  function activateCurrentPath (navItem) {
+  function activateCurrentPath (navItem, trace) {
     var ancestorClasses
     var ancestor = navItem.parentNode
     while (!(ancestorClasses = ancestor.classList).contains('nav-menu')) {
       if (ancestor.tagName === 'LI' && ancestorClasses.contains('nav-item')) {
-        ancestorClasses.add('is-active', 'is-current-path')
+        ancestorClasses.add('is-active')
+        if (trace !== false) ancestorClasses.add('is-current-path')
       }
       ancestor = ancestor.parentNode
     }

src/js/01-nav.js

@@ -1,6 +1,7 @@
 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
+    <button class="nav-menu-toggle" title="Toggle expand/collapse all"></button>
     {{#with @root.page.componentVersion}}
     <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
     {{/with}}