Skip to content

Commit

Permalink
Auto scroll to current side nav item + show all breadcrumbs (#161)
Browse files Browse the repository at this point in the history
* scrollIntoView for current page nav item, show all breadcrumbs

* classnames for algolia

* more ids for algolia

* better algoia selectors
  • Loading branch information
colegoldsmith authored Aug 28, 2024
1 parent 76243bc commit 312b590
Show file tree
Hide file tree
Showing 5 changed files with 24 additions and 22 deletions.
7 changes: 0 additions & 7 deletions src/helpers/is-last.js

This file was deleted.

9 changes: 7 additions & 2 deletions src/js/01-nav.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
24 changes: 14 additions & 10 deletions src/partials/breadcrumbs.hbs
Original file line number Diff line number Diff line change
@@ -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}}
2 changes: 1 addition & 1 deletion src/partials/nav-tree.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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}}>
Expand Down
4 changes: 2 additions & 2 deletions src/partials/nav.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 312b590

Please sign in to comment.