(#997) Highlight Active page

The change here ensures the left side navigation
always highlights the active page. This also
makes sure that an expanded navigation item does
not collapse on reload. The trailing slash, or
lack of, has been accounted for now.

Author: st3phhays

src/components/sidebar/SidebarListItem.astro

@@ -1,6 +1,7 @@
 ---
 // Scripts and types
 import type { ContentTree } from '@scripts/types';
+import { isActivePage } from '@scripts/is-active-page';
 
 interface Props {
     content: ContentTree;
@@ -9,12 +10,8 @@ interface Props {
 
 const { content, paddingClass } = Astro.props;
 const activeSlug = Astro.url.pathname;
-
-const isActivePage = () => {
-    return content.slug === activeSlug || content.slug.slice(0, -1) === activeSlug;
-};
 ---
 
 <li class={`nav-item nav-item-blue`}>
-    <a class={`nav-link ${paddingClass} ${isActivePage() ? 'active active-page' : ''}`} href={content.slug}>{content.data.title}</a>
+    <a class={`nav-link ${paddingClass} ${isActivePage(content.slug, activeSlug) ? 'active active-page' : ''}`} href={content.slug}>{content.data.title}</a>
 </li>

src/components/sidebar/SidebarSelf.astro

@@ -1,6 +1,7 @@
 ---
 // Scripts and types
 import type { ContentTree } from '@scripts/types';
+import { isActivePage } from '@scripts/is-active-page';
 import { slugId } from '@scripts/helpers';
 
 // Components
@@ -75,7 +76,7 @@ const isActiveChild = (doc: ContentTree) => {
         }
         
         // Check if the current document's slug matches the activeSlug
-        if (currentDoc.slug === activeSlug || currentDoc.slug.slice(0, -1) === activeSlug) {
+        if (isActivePage(currentDoc.slug, activeSlug)) {
             return true;
         }
 
@@ -90,16 +91,12 @@ const isActiveChild = (doc: ContentTree) => {
     // If the activeSlug is not found in any document, return false
     return false;
 };
-
-const isActivePage = (doc: ContentTree) => {
-    return doc.slug === activeSlug || doc.slug.slice(0, -1) === activeSlug;
-};
 ---
 
 {content.filter(doc => doc.data.showInSidebar === true).map(doc => (
     doc.children && doc.children.length > 0 ? (
         <li class={`nav-item nav-item-blue ${isActiveChild(doc) ? 'active' : ''}`}>
-            <div class={`nav-link nav-link-collapse d-flex ${isActiveChild(doc) ? 'active' : ''} ${isActivePage(doc) ? 'active-page' : ''}`}>
+            <div class={`nav-link nav-link-collapse d-flex ${isActiveChild(doc) ? 'active' : ''} ${isActivePage(doc.slug, activeSlug) ? 'active-page' : ''}`}>
                 <button class={`btn btn-collapse rounded-0 border-0 ${listPaddingClass(doc.data.depth)} ${isActiveChild(doc) ? '' : 'collapsed'}`} type="button" data-bs-toggle="collapse" aria-expanded={`${isActiveChild(doc) ? 'true' : 'false'}`} aria-controls={slugId(`id-${doc.slug}`)} aria-label="collapse or expand navigation" data-bs-target={slugId(`#id-${doc.slug}`)}></button>
                 <a href={doc.slug}>{doc.data.title}</a>
             </div>

src/scripts/is-active-page.ts

@@ -0,0 +1,5 @@
+import type { ContentTree } from '@scripts/types';
+
+export const isActivePage = (passedSlug: string | ContentTree[], activeSlug: string) => {
+    return passedSlug === activeSlug || `${passedSlug}/` === activeSlug || passedSlug.slice(0, -1) === activeSlug;
+};