Merge pull request #1011 from st3phhays/astro-sidebar

(#997) Highlight Active page

Author: gep13

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