wip(curriculum): add toc to about and overview pages

mdn · Feb 2, 2024 · 55d4cf5 · 55d4cf5
1 parent 7ea3eee
commit 55d4cf5
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/client/src/curriculum/about.tsx b/client/src/curriculum/about.tsx
@@ -16,6 +16,7 @@ import { topic2css, useDocTitle } from "./utils";
 import { SidebarContainer } from "../document/organisms/sidebar";
 import { TOC } from "../document/organisms/toc";
 import { RenderCurriculumBody } from "./body";
+import { Sidebar } from "./sidebar";
 
 export function CurriculumAbout(props: HydrationData<any, CurriculumDoc>) {
   const dataURL = `./index.json`;
@@ -58,16 +59,27 @@ export function CurriculumAbout(props: HydrationData<any, CurriculumDoc>) {
           >
             <div className="sidebar-container">
               <SidebarContainer doc={doc} label="Related Topics">
-                <></>
+                {doc.sidebar && (
+                  <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
+                )}
               </SidebarContainer>
               <div className="toc-container">
                 <aside className="toc">
                   <nav>
-                    {doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}
+                    {doc.toc && !!doc.toc.length && (
+                      <TOC toc={doc.toc} title="In this module" />
+                    )}
                   </nav>
                 </aside>
                 {PLACEMENT_ENABLED && <SidePlacement />}
               </div>
+              {doc.sidebar && (
+                <Sidebar
+                  extraClasses="sidebar"
+                  current={doc.mdn_url}
+                  sidebar={doc.sidebar}
+                />
+              )}
             </div>
             <article
               className="curriculum-content curriculum-about"

diff --git a/client/src/curriculum/overview.tsx b/client/src/curriculum/overview.tsx
@@ -13,6 +13,8 @@ import "./no-side.scss";
 import "./overview.scss";
 import { PrevNext } from "./prev-next";
 import { RenderCurriculumBody } from "./body";
+import { SidebarContainer } from "../document/organisms/sidebar";
+import { Sidebar } from "./sidebar";
 
 export function CurriculumModuleOverview(
   props: HydrationData<any, CurriculumDoc>
@@ -56,9 +58,21 @@ export function CurriculumModuleOverview(
             className={`curriculum-content-container curriculum-no-side container topic-${topic2css(doc.topic)}`}
           >
             <div className="sidebar-container">
+              <SidebarContainer doc={doc} label="Related Topics">
+                {doc.sidebar && (
+                  <Sidebar current={doc.mdn_url} sidebar={doc.sidebar} />
+                )}
+              </SidebarContainer>
               <div className="toc-container">
                 {PLACEMENT_ENABLED && <SidePlacement />}
               </div>
+              {doc.sidebar && (
+                <Sidebar
+                  extraClasses="sidebar"
+                  current={doc.mdn_url}
+                  sidebar={doc.sidebar}
+                />
+              )}
             </div>
             <article
               className="curriculum-content curriculum-overview"