Update Left Sidebar current page logic (#2023)

smartcontractkit · Aug 2, 2024 · 05da046 · 05da046
1 parent 57e7978
commit 05da046
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/components/LeftSidebar/LeftSidebar.astro b/src/components/LeftSidebar/LeftSidebar.astro
@@ -33,19 +33,15 @@ const removeSlashes = (url: string) => {
   return sanitizedUrl
 }
 
-// This function checks if the current page is a match for the main section or any of its subpages
-// (e.g. /getting-started-hardhat is a subpage of /getting-started).
-const isCurrentPageMatch = (sectionUrl: string, currentPage: string): boolean => {
+const isCurrentPageMatch = (sectionUrl: string, currentPage: string, highlightAsCurrent: string[] = []): boolean => {
   const normalizedSectionUrl = removeSlashes(sectionUrl)
   const normalizedCurrentPage = removeSlashes(currentPage.slice(1))
 
-  // Direct match (e.g., both "/getting-started")
   if (normalizedCurrentPage === normalizedSectionUrl) {
     return true
   }
 
-  // Check for subpage match (e.g., currentPage is "/getting-started-hardhat" and sectionUrl is "/getting-started")
-  if (normalizedCurrentPage.startsWith(`${normalizedSectionUrl}-`)) {
+  if (highlightAsCurrent.some((url) => removeSlashes(url) === normalizedCurrentPage)) {
     return true
   }
 
@@ -59,7 +55,11 @@ const isCurrentPageMatch = (sectionUrl: string, currentPage: string): boolean =>
       sidebarSections.map((s: { parentSection: Sections; contents: SectionContent[]; section: Sections }) => (
         <li aria-hidden={section === "global"} class={s.parentSection ? `parent-${s.parentSection}` : ""}>
           <details
-            open={!!flattenChildren(s.contents).filter((object) => isCurrentPageMatch(object.url, currentPage)).length}
+            open={
+              !!flattenChildren(s.contents).filter((object) =>
+                isCurrentPageMatch(object.url, currentPage, object.highlightAsCurrent)
+              ).length
+            }
           >
             <summary class="nav-group-title">{s.section}</summary>
             <ul class="nav-group-entries">
@@ -70,7 +70,9 @@ const isCurrentPageMatch = (sectionUrl: string, currentPage: string): boolean =>
                       <a
                         class="nav-link"
                         href={`${Astro.site?.pathname}${child.url}`}
-                        aria-current={isCurrentPageMatch(child.url, currentPage) ? "page" : "false"}
+                        aria-current={
+                          isCurrentPageMatch(child.url, currentPage, child.highlightAsCurrent) ? "page" : "false"
+                        }
                       >
                         <ActiveIcon />
                         {child.title}

diff --git a/src/config/sidebar.ts b/src/config/sidebar.ts
@@ -1,5 +1,10 @@
 import { Sections } from "../content/config"
-export type SectionContent = { title: string; url: string; children?: { title: string; url: string }[] }
+export type SectionContent = {
+  title: string
+  url: string
+  highlightAsCurrent?: string[]
+  children?: { title: string; url: string }[]
+}
 type SectionEntry = {
   section: string
   contents: SectionContent[]
@@ -216,6 +221,7 @@ export const SIDEBAR: Partial<Record<Sections, SectionEntry[]>> = {
         {
           title: "Getting Started",
           url: "data-streams/getting-started",
+          highlightAsCurrent: ["data-streams/getting-started-hardhat"],
         },
         {
           title: "Data Streams Feed IDs",