activate path of current page in nav using template instead of JavaScript (PR #72)

Author: mojavelinux

src/helpers/traceCurrentPath.js

@@ -0,0 +1,24 @@
+'use strict'
+
+module.exports = (
+  navigation,
+  {
+    data: {
+      root: { page },
+    },
+  }
+) => {
+  traceCurrentPathInternal(navigation, page.url)
+  return navigation
+}
+
+function traceCurrentPathInternal (items, currentPageUrl, path = []) {
+  for (const item of items) {
+    if (item.url === currentPageUrl) {
+      for (const ancestor of path) ancestor.current = 'path'
+      item.current = 'page'
+      return true
+    }
+    if (item.items && traceCurrentPathInternal(item.items, currentPageUrl, path.concat(item))) return true
+  }
+}

src/js/01-nav.js

@@ -16,7 +16,7 @@
   var currentPageItem = menuPanel.querySelector('.is-current-page')
   var originalPageItem = currentPageItem
   if (currentPageItem) {
-    activateCurrentPath(currentPageItem)
+    //activateCurrentPath(currentPageItem) // enable if not handled by template
     scrollItemToMidpoint(menuPanel, currentPageItem.querySelector('.nav-link'))
   } else {
     menuPanel.scrollTop = 0

src/partials/nav-menu.hbs

@@ -5,7 +5,7 @@
     {{#with @root.page.componentVersion}}
     <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
     {{/with}}
-{{> nav-tree navigation=this}}
+{{> nav-tree navigation=(traceCurrentPath this)}}
   </nav>
 </div>
 {{/with}}

src/partials/nav-tree.hbs

@@ -1,7 +1,7 @@
 {{#if navigation.length}}
 <ul class="nav-list">
   {{#each navigation}}
-  <li class="nav-item{{#if (eq ./url @root.page.url)}} is-current-page{{/if}}" data-depth="{{or ../level 0}}">
+  <li class="nav-item{{#with ./current}} is-current-{{{this}}} is-active{{/with}}" data-depth="{{or ../level 0}}">
     {{#if ./content}}
     {{#if ./items.length}}
     <button class="nav-item-toggle"></button>