Auto scroll to current side nav item + show all breadcrumbs (#161)

* scrollIntoView for current page nav item, show all breadcrumbs

* classnames for algolia

* more ids for algolia

* better algoia selectors

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

@@ -1,24 +1,28 @@
 {{#unless (or (eq page.layout 'landing') (eq page.layout 'full') (eq page.layout 'home'))}}
-<nav class="flex" aria-label="breadcrumbs">
-  {{#if page.breadcrumbs}}
-  <ul class="flex flex-wrap !list-none !m-0 !p-0">
+{{#if page.breadcrumbs}}
+<nav id="breadcrumbs" class="flex" aria-label="breadcrumbs">
+  <ol 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 class="component-home" 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}}
-  </ul>
-  {{/if}}
+  </ol>
 </nav>
+{{/if}}
 {{/unless}}

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}}>

src/partials/nav-tree.hbs

@@ -6,9 +6,9 @@
   {{~/if}}
   id="side-nav" 
   class="h-full bg-level1 overflow-y-scroll flex flex-col w-[18.5rem] px-2 pt-2">
-    <div class="flex items-start gap-1 mb-1 ">
+    <div class="flex items-start gap-1 mb-1">
       {{#with @root.page.componentVersion}}
-      <a class="flex flex-grow py-1 px-2 text-h4 hover:bg-level2 rounded transition-colors !no-underline" href="{{{relativize ./url}}}">{{./title}}</a>
+      <a class="component-home flex flex-grow py-1 px-2 text-h4 hover:bg-level2 rounded transition-colors !no-underline" href="{{{relativize ./url}}}">{{./title}}</a>
       {{/with}}
       {{> page-versions page=../page}}
     </div>