open menu item when activated

- open menu item when activated (i.e., clicked)
- reorder logic in navigation script to be more intuitive
- use single query to find all menu items to open

diff --git a/src/js/01-navigation.js b/src/js/01-navigation.js
index 0a1fcb3..96150a0 100644 (file)
--- a/src/js/01-navigation.js
+++ b/src/js/01-navigation.js
@@ -18,8 +18,6 @@
   // don't let click events propagate outside of navigation container
   navContainer.addEventListener('click', concealEvent)
 
-  if (currentPageItem) activateCurrentPath(currentPageItem)
-
   find('.nav-menu').forEach(function (navTree) {
     var panel = navTree.parentElement.dataset.panel
     find('.nav-item', navTree).forEach(function (item, idx) {
@@ -36,17 +34,27 @@
     })
   })
 
-  if (!state.expandedItems) {
-    state.expandedItems = getExpandedItems()
-    saveState()
-  }
+  var expandedItems = state.expandedItems || (state.expandedItems = [])
 
-  state.expandedItems.forEach(function (itemId) {
-    var item = document.querySelector('.nav-item[data-id="' + itemId + '"]')
-    if (item) {
+  if (expandedItems.length) {
+    find(
+      expandedItems
+        .map(function (itemId) {
+          return '.nav-item[data-id="' + itemId + '"]'
+        })
+        .join(',')
+    ).forEach(function (item) {
       item.classList.add('is-active')
-    }
-  })
+    })
+  }
+
+  if (currentPageItem) {
+    activateCurrentPath(currentPageItem).forEach(function (itemId) {
+      if (expandedItems.indexOf(itemId) < 0) {
+        expandedItems.push(itemId)
+      }
+    })
+  }
 
   saveState()
 
@@ -58,14 +66,18 @@
   })
 
   function activateCurrentPath (navItem) {
+    var ids = [navItem.dataset.id]
     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')
+        ids.push(ancestor.dataset.id)
       }
       ancestor = ancestor.parentNode
     }
+    navItem.classList.add('is-active')
+    return ids
   }
 
   function toggleNavigation (e) {