From 9f263c0f9e994442909dfa3c01eaf9d7f2e7701f Mon Sep 17 00:00:00 2001
From: Kevin Stadler <kevin.stadler@oeaw.ac.at>
Date: Tue, 24 Sep 2024 09:42:20 +0200
Subject: [PATCH] feat: add 'works' disclosure menu

---
 app/layout.tsx                     |  8 ++-
 components/app-header-nav-menu.tsx | 94 ++++++++++++++++++++++++++++++
 components/app-header.tsx          | 41 ++-----------
 components/disclosure-button.tsx   | 25 ++++++++
 4 files changed, 130 insertions(+), 38 deletions(-)
 create mode 100644 components/app-header-nav-menu.tsx
 create mode 100644 components/disclosure-button.tsx

diff --git a/app/layout.tsx b/app/layout.tsx
index 161da56..bc0ee62 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -116,7 +116,13 @@ export default function LocaleLayout(props: LocaleLayoutProps): ReactNode {
 
 				<Providers
 					locale={locale}
-					messages={pick(messages, ["Error", "SearchPage", "PublicationCover"])}
+					messages={pick(messages, [
+						"AppHeader",
+						"BernhardCategories",
+						"Error",
+						"SearchPage",
+						"PublicationCover",
+					])}
 				>
 					<AppLayout>
 						<AppHeader />
diff --git a/components/app-header-nav-menu.tsx b/components/app-header-nav-menu.tsx
new file mode 100644
index 0000000..709d80d
--- /dev/null
+++ b/components/app-header-nav-menu.tsx
@@ -0,0 +1,94 @@
+"use client";
+import { useTranslations } from "next-intl";
+import { type ReactNode, useId, useState } from "react";
+
+import { AppNavLink } from "@/components/app-nav-link";
+import type { LinkProps } from "@/components/link";
+import { createHref } from "@/lib/create-href";
+import { otherCategories, proseCategories } from "@/lib/model";
+
+import { DisclosureButton } from "./disclosure-button";
+
+export function AppHeaderNavMenu(): ReactNode {
+	const t = useTranslations("AppHeader");
+	const catt = useTranslations("BernhardCategories");
+
+	const links = {
+		home: { href: createHref({ pathname: "/" }), label: t("links.home") },
+		languages: {
+			href: createHref({ pathname: "/languages" }),
+			label: t("links.languages"),
+		},
+		translators: {
+			href: createHref({ pathname: "/translators" }),
+			label: t("links.translators"),
+		},
+		search: {
+			href: createHref({ pathname: "/search" }),
+			label: t("links.search"),
+		},
+	} satisfies Record<string, { href: LinkProps["href"]; label: string }>;
+
+	const worksMenu = useId();
+	const [worksMenuOpen, setWorksMenuOpen] = useState(false);
+	const proseMenu = useId();
+	const [proseMenuOpen, setProseMenuOpen] = useState(false);
+
+	return (
+		<nav aria-label={t("navigation-primary")}>
+			<ul className="flex h-10 items-center gap-4 text-sm" role="list">
+				{Object.entries(links).map(([id, link]) => {
+					return (
+						<li key={id}>
+							<AppNavLink href={link.href}>{link.label}</AppNavLink>
+						</li>
+					);
+				})}
+				<li>
+					<DisclosureButton
+						controls={worksMenu}
+						label={t("links.works")}
+						setState={setWorksMenuOpen}
+						state={worksMenuOpen}
+					/>
+				</li>
+			</ul>
+			{worksMenuOpen ? (
+				<ul className="flex h-10 items-center gap-4 text-sm" id={worksMenu} role="list">
+					<li>
+						<DisclosureButton
+							controls={proseMenu}
+							label={catt("prose")}
+							setState={setProseMenuOpen}
+							state={proseMenuOpen}
+						/>
+					</li>
+					{otherCategories.map((c) => {
+						return (
+							<AppNavLink
+								key={c}
+								href={`/works/${c}`}
+								onClick={() => {
+									setProseMenuOpen(false);
+								}}
+							>
+								{catt(c)}
+							</AppNavLink>
+						);
+					})}
+				</ul>
+			) : null}
+			{worksMenuOpen && proseMenuOpen ? (
+				<ul className="flex h-10 items-center gap-4 text-sm" id={proseMenu} role="list">
+					{proseCategories.map((c) => {
+						return (
+							<AppNavLink key={c} href={`/works/${c}`}>
+								{catt(c)}
+							</AppNavLink>
+						);
+					})}
+				</ul>
+			) : null}
+		</nav>
+	);
+}
diff --git a/components/app-header.tsx b/components/app-header.tsx
index a762953..f76a084 100644
--- a/components/app-header.tsx
+++ b/components/app-header.tsx
@@ -1,34 +1,11 @@
-import { useTranslations } from "next-intl";
 import type { ReactNode } from "react";
 
-import { AppNavLink } from "@/components/app-nav-link";
 import { ColorSchemeSwitcher } from "@/components/color-scheme-switcher";
-import { Link, type LinkProps } from "@/components/link";
-import { createHref } from "@/lib/create-href";
+import { Link } from "@/components/link";
 
-export function AppHeader(): ReactNode {
-	const t = useTranslations("AppHeader");
-
-	const links = {
-		home: { href: createHref({ pathname: "/" }), label: t("links.home") },
-		works: {
-			href: createHref({ pathname: "/works/novels" }),
-			label: t("links.works"),
-		},
-		languages: {
-			href: createHref({ pathname: "/languages" }),
-			label: t("links.languages"),
-		},
-		translators: {
-			href: createHref({ pathname: "/translators" }),
-			label: t("links.translators"),
-		},
-		search: {
-			href: createHref({ pathname: "/search" }),
-			label: t("links.search"),
-		},
-	} satisfies Record<string, { href: LinkProps["href"]; label: string }>;
+import { AppHeaderNavMenu } from "./app-header-nav-menu";
 
+export function AppHeader(): ReactNode {
 	return (
 		<header className="border-b">
 			<div className="container flex items-center justify-between gap-4 py-6">
@@ -37,17 +14,7 @@ export function AppHeader(): ReactNode {
 						thomas bernhard in translation
 					</Link>
 				</div>
-				<nav aria-label={t("navigation-primary")}>
-					<ul className="flex items-center gap-4 text-sm" role="list">
-						{Object.entries(links).map(([id, link]) => {
-							return (
-								<li key={id}>
-									<AppNavLink href={link.href}>{link.label}</AppNavLink>
-								</li>
-							);
-						})}
-					</ul>
-				</nav>
+				<AppHeaderNavMenu />
 				<div className="flex items-center gap-4">
 					<ColorSchemeSwitcher />
 				</div>
diff --git a/components/disclosure-button.tsx b/components/disclosure-button.tsx
new file mode 100644
index 0000000..6285aed
--- /dev/null
+++ b/components/disclosure-button.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+interface DisclosureButtonProps {
+	controls: string;
+	label: string;
+	state: boolean;
+	// eslint-disable-next-line @typescript-eslint/ban-types
+	setState: Function;
+}
+
+export function DisclosureButton(props: DisclosureButtonProps): ReactNode {
+	const toggleState = () => {
+		props.setState(!props.state);
+	};
+	return (
+		<button
+			aria-controls={props.controls}
+			aria-expanded={props.state}
+			onClick={toggleState}
+			type="button"
+		>
+			{props.label}
+		</button>
+	);
+}