From 74c79e972b13ac7e20928c9a725b10bf585062e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Thu, 12 Dec 2024 14:31:31 +0100
Subject: [PATCH] Add dropdown nav for about pages

---
 site/SiteAbout.tsx             | 22 ++++++++++++++++++++++
 site/SiteMobileMenu.tsx        | 16 ++++++++++++++--
 site/SiteNavigation.tsx        | 13 +++++++++++--
 site/gdocs/pages/AboutPage.tsx | 27 ++++++++++-----------------
 4 files changed, 57 insertions(+), 21 deletions(-)
 create mode 100644 site/SiteAbout.tsx

diff --git a/site/SiteAbout.tsx b/site/SiteAbout.tsx
new file mode 100644
index 00000000000..768a09c84db
--- /dev/null
+++ b/site/SiteAbout.tsx
@@ -0,0 +1,22 @@
+import * as React from "react"
+
+export const ABOUT_LINKS = [
+    { title: "About Us", href: "/about" },
+    { title: "Organization", href: "/organization" },
+    { title: "Funding", href: "/funding" },
+    { title: "Team", href: "/team" },
+    { title: "Jobs", href: "/jobs" },
+    { title: "FAQs", href: "/faqs" },
+]
+
+export function SiteAbout() {
+    return (
+        <ul>
+            {ABOUT_LINKS.map(({ title, href }) => (
+                <li key={href}>
+                    <a href={href}>{title}</a>
+                </li>
+            ))}
+        </ul>
+    )
+}
diff --git a/site/SiteMobileMenu.tsx b/site/SiteMobileMenu.tsx
index 09fd1d1b94f..3baaa940574 100644
--- a/site/SiteMobileMenu.tsx
+++ b/site/SiteMobileMenu.tsx
@@ -3,6 +3,7 @@ import { CategoryWithEntries } from "@ourworldindata/utils"
 import classnames from "classnames"
 import { SiteNavigationToggle } from "./SiteNavigationToggle.js"
 import { Menu } from "./SiteNavigation.js"
+import { SiteAbout } from "./SiteAbout.js"
 import { SiteResources } from "./SiteResources.js"
 import { SiteMobileCategory } from "./SiteMobileCategory.js"
 
@@ -68,9 +69,20 @@ export const SiteMobileMenu = ({
                     </SiteNavigationToggle>
                 </li>
                 <li>
-                    <a href="/about" className="section__header">
+                    <SiteNavigationToggle
+                        ariaLabel="Toggle about menu"
+                        isActive={menu === Menu.About}
+                        onToggle={() =>
+                            toggleMenu(
+                                menu === Menu.About ? Menu.Topics : Menu.About
+                            )
+                        }
+                        dropdown={<SiteAbout />}
+                        withCaret={true}
+                        className="SiteNavigationToggle--lvl1"
+                    >
                         About
-                    </a>
+                    </SiteNavigationToggle>
                 </li>
                 <li>
                     <a href="/donate" className="donate">
diff --git a/site/SiteNavigation.tsx b/site/SiteNavigation.tsx
index f95d4ef8682..1d19b2acbc1 100644
--- a/site/SiteNavigation.tsx
+++ b/site/SiteNavigation.tsx
@@ -16,6 +16,7 @@ import {
     OwidGdocType,
     getOwidGdocFromJSON,
 } from "@ourworldindata/utils"
+import { SiteAbout } from "./SiteAbout.js"
 import { SiteResources } from "./SiteResources.js"
 import { SiteSearchNavigation } from "./SiteSearchNavigation.js"
 import { SiteMobileMenu } from "./SiteMobileMenu.js"
@@ -174,8 +175,16 @@ export const SiteNavigation = ({
                                         Resources
                                     </SiteNavigationToggle>
                                 </li>
-                                <li>
-                                    <a href="/about">About</a>
+                                <li className="with-relative-dropdown">
+                                    <SiteNavigationToggle
+                                        ariaLabel="Toggle about menu"
+                                        isActive={menu === Menu.About}
+                                        onToggle={() => toggleMenu(Menu.About)}
+                                        dropdown={<SiteAbout />}
+                                        withCaret={true}
+                                    >
+                                        About
+                                    </SiteNavigationToggle>
                                 </li>
                             </ul>
                         </nav>
diff --git a/site/gdocs/pages/AboutPage.tsx b/site/gdocs/pages/AboutPage.tsx
index f81a7371518..9b7c30336ef 100644
--- a/site/gdocs/pages/AboutPage.tsx
+++ b/site/gdocs/pages/AboutPage.tsx
@@ -3,18 +3,10 @@ import { isEmpty } from "lodash"
 import * as React from "react"
 
 import { OwidGdocAboutInterface } from "@ourworldindata/types"
+import { ABOUT_LINKS } from "../../SiteAbout.js"
 import { ArticleBlocks } from "../components/ArticleBlocks.js"
 import Footnotes from "../components/Footnotes.js"
 
-const NAV_LINKS = [
-    { title: "About Us", href: "/about" },
-    { title: "Organization", href: "/organization" },
-    { title: "Funding", href: "/funding" },
-    { title: "Team", href: "/team" },
-    { title: "Jobs", href: "/jobs" },
-    { title: "FAQs", href: "/faqs" },
-]
-
 export default function AboutPage({ content, slug }: OwidGdocAboutInterface) {
     return (
         <main className="about-page centered-article-container grid grid-cols-12-full-width">
@@ -39,21 +31,22 @@ function AboutNav({ slug }: { slug: string }) {
     return (
         <nav className="about-nav grid grid-cols-12-full-width col-start-1 col-end-limit">
             <ul className="about-nav-list col-start-2 col-end-14 col-sm-start-1">
-                {NAV_LINKS.map(({ title, href }) => (
-                    <li key={href}>
-                        <h2>
+                {ABOUT_LINKS.map(({ title, href }) => {
+                    const isActive = href === `/${slug}`
+                    return (
+                        <li key={href}>
                             <a
                                 className={cx("about-nav-link", {
-                                    "about-nav-link--is-active":
-                                        href === `/${slug}`,
+                                    "about-nav-link--is-active": isActive,
                                 })}
                                 href={href}
+                                aria-current={isActive ? "page" : undefined}
                             >
                                 {title}
                             </a>
-                        </h2>
-                    </li>
-                ))}
+                        </li>
+                    )
+                })}
             </ul>
         </nav>
     )