scrollIntoView for current page nav item, show all breadcrumbs

Author: colegoldsmith

src/helpers/is-last.js

@@ -15,17 +15,22 @@
     })
   }
 
-  // Open first nav collapse if none are open.
-  // Useful for pages with no nav links i.e. landing pages.
   const sideNav = document.querySelector('#side-nav')
   if (sideNav) {
+    // Open first nav collapse if none are open.
+    // Useful for pages with no nav links i.e. landing pages.
     const activeCollapses = sideNav.querySelectorAll('.collapse > .collapse-content.active')
     if (!activeCollapses.length) {
       const firstCollapse = sideNav.querySelector('.collapse > .collapse-content')
       if (firstCollapse) {
         firstCollapse.classList.add('active')
       }
     }
+    // Auto scroll the side nav to the current page's side nav link
+    const currentPageLink = sideNav.querySelector('.nav-link.current-page')
+    if (currentPageLink) {
+      currentPageLink.scrollIntoView({ block: 'center' })
+    }
   }
 
   // Top Global Nav horizontal scrolling

src/js/01-nav.js

@@ -4,17 +4,21 @@
   <ul class="flex flex-wrap !list-none !m-0 !p-0">
     {{#with page.componentVersion}}
     {{#if (and ./title (ne ./title @root.page.breadcrumbs.0.content))}}
-    <li class="text-link !m-0 !p-0 after:content-['/'] last-of-type:after:content-none after:text-tertiary after:px-2"><a href="{{{relativize ./url}}}">{{{./title}}}</a></li>
+    <li class="text-link !m-0 !p-0 after:content-['/'] last-of-type:after:content-none after:text-tertiary after:px-2">
+      <a href="{{{relativize ./url}}}">{{{./title}}}</a>
+    </li>
     {{/if}}
     {{/with}}
     {{#each page.breadcrumbs}}
-    {{#if (and ./url (eq ./urlType 'internal'))}}
-    {{#if (is-last this ../page.breadcrumbs)}}
-    <li class="text-tertiary !m-0 !p-0">{{{./content}}}</li>
-    {{else}}
+    {{#if ./content}}
+    {{#if (not (eq ./url @root.page.url))}}
+    {{#if (eq ./urlType 'internal')}}
     <li class="text-link !m-0 !p-0 after:content-['/'] last-of-type:after:content-none after:text-tertiary after:px-2">
       <a href="{{{relativize ./url}}}">{{{./content}}}</a>
     </li>
+    {{else}}
+    <li class="text-tertiary !m-0 !p-0 after:content-['/'] last-of-type:after:content-none after:text-tertiary after:px-2">{{{./content}}}</li>
+    {{/if}}
     {{/if}}
     {{/if}}
     {{/each}}

src/partials/breadcrumbs.hbs

@@ -5,7 +5,7 @@
   <li class="nav-item{{#if ./items.length}} collapse{{/if}}" data-depth="{{or ../level 0}}">
     {{#if (and ./url (not ./items.length))}}
     <a 
-      class="nav-link !no-underline" 
+      class="nav-link !no-underline{{#if (eq ./url @root.page.url)}} current-page{{/if}}" 
       href="{{~#if (eq ./urlType 'internal')}}{{{relativize ./url}}}{{~else}}{{{./url}}}{{~/if}}"
       {{#if (eq ./url @root.page.url)}} aria-current="page"{{/if}}
       {{#if (eq ./urlType 'external')}} target="_blank"{{/if}}>