feat(curriculum): highlight current page in sidebar

mdn · Jan 31, 2024 · 3e46674 · 3e46674
1 parent a24a380
commit 3e46674
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 7 deletions.
diff --git a/client/src/curriculum/index.scss b/client/src/curriculum/index.scss
@@ -37,4 +37,16 @@
       }
     }
   }
+
+  .sidebar {
+    li > em {
+      background-color: var(--background-toc-active);
+      border-left: 2px solid var(--category-color);
+      display: inline-block;
+      font-style: normal;
+      font-weight: 600;
+      padding: 0.25rem 0.25rem 0.25rem 0.5rem;
+      width: 100%;
+    }
+  }
 }
diff --git a/client/src/curriculum/index.tsx b/client/src/curriculum/index.tsx
@@ -76,7 +76,9 @@ export function CurriculumLanding(props: HydrationData<any, CurriculumDoc>) {
                 </aside>
                 {PLACEMENT_ENABLED && <SidePlacement />}
               </div>
-              {doc.sidebar && <Sidebar sidebar={doc.sidebar} />}
+              {doc.sidebar && (
+                <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
+              )}
             </div>
             <article className="curriculum-content" lang={doc?.locale}>
               <header>

diff --git a/client/src/curriculum/module.tsx b/client/src/curriculum/module.tsx
@@ -58,7 +58,9 @@ export function CurriculumModule(props: HydrationData<any, CurriculumDoc>) {
                 </aside>
                 {PLACEMENT_ENABLED && <SidePlacement />}
               </div>
-              {doc.sidebar && <Sidebar sidebar={doc.sidebar} />}
+              {doc.sidebar && (
+                <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
+              )}
             </div>
             <article className="curriculum-content" lang={doc?.locale}>
               <header>

diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx
@@ -59,7 +59,9 @@ export function CurriculumModuleOverview(
                 </aside>
                 {PLACEMENT_ENABLED && <SidePlacement />}
               </div>
-              {doc.sidebar && <Sidebar sidebar={doc.sidebar} />}
+              {doc.sidebar && (
+                <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
+              )}
             </div>
             <article className="curriculum-content" lang={doc?.locale}>
               <header>

diff --git a/client/src/curriculum/sidebar.tsx b/client/src/curriculum/sidebar.tsx
@@ -1,19 +1,29 @@
 import { ModuleIndexEntry } from "../../../libs/types/curriculum";
 
 import "./module.scss";
-export function Sidebar({ sidebar = [] }: { sidebar: ModuleIndexEntry[] }) {
+export function Sidebar({
+  current = "",
+  sidebar = [],
+}: {
+  current: string;
+  sidebar: ModuleIndexEntry[];
+}) {
   return (
-    <aside className="sidebar">
+    <aside className="sidebar" data-current={current}>
       <ol>
         {sidebar.map((o, i) => (
           <li key={i}>
-            <a href={o.url}>{o.title}</a>
+            <SidebarLink current={current} url={o.url} title={o.title} />
             {o.children && (
               <ol>
                 {o.children.map((c, j) => {
                   return (
                     <li key={`${i}-${j}`}>
-                      <a href={c.url}>{c.title}</a>
+                      <SidebarLink
+                        current={current}
+                        url={c.url}
+                        title={c.title}
+                      />
                     </li>
                   );
                 })}
@@ -25,3 +35,26 @@ export function Sidebar({ sidebar = [] }: { sidebar: ModuleIndexEntry[] }) {
     </aside>
   );
 }
+
+function SidebarLink({
+  current,
+  url,
+  title,
+}: {
+  current: string;
+  url: string;
+  title: string;
+}) {
+  const isCurrent = url === current;
+  if (isCurrent) {
+    return (
+      <em>
+        <a href={url} aria-current="page">
+          {title}
+        </a>
+      </em>
+    );
+  } else {
+    return <a href={url}>{title}</a>;
+  }
+}