Rebuild the site to the Claude Design drafts
Carries the 11 page drafts plus the shared SiteNav and SiteFooter onto the project's own design system: tier-2 tokens, the published type roles, logical properties throughout, and both locales. Surfaces - The page stands on #0B0B0A with #1D1D1B bands lifted off it, as the drafts do; the body previously painted the band colour, so every band was a step too light. - A card is drawn one step off whatever it stands on (#1D1D1B on the ground, #141413 inside a band). Components paint --surface-card and a band re-points it for its subtree, so a card can never come out the same colour as its band. Shell - Nav: translucent ground with a blur, chevrons on group triggers, an accent rule under the current section, the drafts' compact dropdown card, and an EN | AR toggle in place of the globe menu. - Footer: the drafts' four-column grid, one-line brand text, Facebook as a bordered button, the EU lockup, the implemented-by row and the funding disclaimer. Pages - Home: hero with counting figures, launch band, three areas of change, newsroom, FAQ accordion and the consortium band. - The nine interior pages rebuilt and then audited section by section against their drafts. - Applications: the three-step application form now posts real submissions to the Strapi `application` type, validated server-side and working without JavaScript. Motion - Every animation in the drafts, as classes in _page-kit/motion.css: staggered entrances, scroll-driven reveals, the drifting washes (each page carries its own geometry), the sheen, the counting figures and the accordion. The drafts' coloured hover glow is deliberately not shipped. CMS - New `faq` collection type behind the home page's accordion. - `role` added to the consortium member component so an editor can supply the chip and the deliverable separately. Content - No invented figure, date, name or commitment ships: the five-working-day reply, the placeholder email and Facebook handle, the sample news, events, publications and FAQs, the invented application rules and the TBD counters are all withheld pending real content. Figures that survived (3 consortium partners, 4 areas of work, 16 human security sub-projects, Dec 2025 - Dec 2027) are verified against docs/ and the bundled draft copy. Verified: pnpm typecheck (web + CMS) and pnpm --filter web build pass; all 20 page/locale URLs render 200 through the built SSR handler, including with the CMS unreachable; no raw hex or physical-direction utility in components or routes. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -18,9 +18,50 @@ import { isNavGroup, type NavItem, type NavigationStrings } from "./types";
|
||||
/* The trigger row and the column row MUST use the same gap: the columns are
|
||||
width-matched to their triggers, so an identical gap is what makes every
|
||||
column line up under its own heading in both directions. */
|
||||
/* The draft marks a group trigger with a chevron and each menu entry with a
|
||||
forward arrow. Both are decorative: the label beside them carries the name. */
|
||||
function Chevron() {
|
||||
return (
|
||||
<svg
|
||||
width="11"
|
||||
height="11"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="3"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
className="shrink-0"
|
||||
>
|
||||
<path d="M5 9l7 7 7-7" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function MenuArrow() {
|
||||
return (
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.2"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden="true"
|
||||
/* Mirrors with the page: the arrow points at the reading edge. */
|
||||
className="shrink-0 rtl:-scale-x-100"
|
||||
>
|
||||
<path d="M5 12h13M12.5 6.5L18 12l-5.5 5.5" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
const ROW_GAP = "gap-2xl";
|
||||
|
||||
/** Grace period before a pointer leaving the bar closes the mega menu. */
|
||||
/** Grace period before a pointer leaving the bar closes the open group. */
|
||||
const CLOSE_DELAY_MS = 160;
|
||||
|
||||
export interface DesktopNavProps {
|
||||
@@ -36,12 +77,22 @@ export interface DesktopNavProps {
|
||||
type ColumnPosition = "first" | "last";
|
||||
|
||||
/**
|
||||
* Desktop navigation with the Figma mega menu (317:6063): opening reveals every
|
||||
* group's children at once, each column sitting directly under its own trigger.
|
||||
* Desktop navigation. Every group is a disclosure: hovering its trigger, or
|
||||
* opening it from the keyboard, reveals that group's links - and only that
|
||||
* group's - in a column directly under its own trigger.
|
||||
*
|
||||
* Opens on hover and on keyboard focus, closes on Escape, on outside click and
|
||||
* when focus leaves the bar. Tab is deliberately untouched, so focus is never
|
||||
* trapped; the arrow keys add direct movement on top of it.
|
||||
* DEVIATION FROM FIGMA: the mega menu (317:6063) reveals every group's column
|
||||
* at once. The designer has since asked for only the hovered group to open, so
|
||||
* the panel keeps the Figma column geometry - each column under its trigger, on
|
||||
* the bar's own surface - but shows one column at a time, on a backdrop as wide
|
||||
* as the row of items rather than the whole window.
|
||||
*
|
||||
* Keyboard follows the disclosure-navigation pattern: a trigger does not open
|
||||
* on focus; Enter, Space and ArrowDown open it. The columns share one backdrop,
|
||||
* so they come after the whole trigger row in the DOM; Tab is bridged to match
|
||||
* what the reader sees - from an open trigger it steps into that column, and
|
||||
* from the column's last link it moves on to the next trigger. Escape, an
|
||||
* outside press and focus leaving the bar all close it. Focus is never trapped.
|
||||
*/
|
||||
export function DesktopNav({
|
||||
items,
|
||||
@@ -50,12 +101,16 @@ export function DesktopNav({
|
||||
direction,
|
||||
className,
|
||||
}: DesktopNavProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
/** The one group whose column is showing, or null when nothing is open. */
|
||||
const [openGroup, setOpenGroup] = useState<string | null>(null);
|
||||
const navRef = useRef<HTMLElement>(null);
|
||||
const closeTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
|
||||
const pendingFocus = useRef<{ groupId: string; position: ColumnPosition } | null>(
|
||||
null,
|
||||
);
|
||||
/* How the last press on a trigger began, so a mouse click does not close the
|
||||
column that hovering the same trigger has just opened. */
|
||||
const lastPointerType = useRef<string | null>(null);
|
||||
|
||||
const rawId = useId();
|
||||
const baseId = `sharper-nav-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
|
||||
@@ -71,44 +126,27 @@ export function DesktopNav({
|
||||
}
|
||||
}, []);
|
||||
|
||||
const openMega = useCallback(() => {
|
||||
clearCloseTimer();
|
||||
setOpen(true);
|
||||
}, [clearCloseTimer]);
|
||||
const showGroup = useCallback(
|
||||
(groupId: string) => {
|
||||
clearCloseTimer();
|
||||
setOpenGroup(groupId);
|
||||
},
|
||||
[clearCloseTimer],
|
||||
);
|
||||
|
||||
const closeMega = useCallback(() => {
|
||||
const closeGroup = useCallback(() => {
|
||||
clearCloseTimer();
|
||||
pendingFocus.current = null;
|
||||
setOpen(false);
|
||||
setOpenGroup(null);
|
||||
}, [clearCloseTimer]);
|
||||
|
||||
const scheduleClose = useCallback(() => {
|
||||
clearCloseTimer();
|
||||
closeTimer.current = setTimeout(() => setOpen(false), CLOSE_DELAY_MS);
|
||||
closeTimer.current = setTimeout(() => setOpenGroup(null), CLOSE_DELAY_MS);
|
||||
}, [clearCloseTimer]);
|
||||
|
||||
useEffect(() => clearCloseTimer, [clearCloseTimer]);
|
||||
|
||||
/* Outside click. pointerdown rather than click so the menu is already gone
|
||||
by the time the click lands on whatever is underneath. */
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const handlePointerDown = (event: PointerEvent) => {
|
||||
if (!navRef.current?.contains(event.target as Node)) setOpen(false);
|
||||
};
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
||||
}, [open]);
|
||||
|
||||
/* A keyboard request to open and step into a column can only be honoured
|
||||
once the column has actually rendered. */
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const target = pendingFocus.current;
|
||||
pendingFocus.current = null;
|
||||
if (target) focusInColumn(target.groupId, target.position);
|
||||
}, [open]);
|
||||
|
||||
const columnLinks = useCallback((groupId: string): HTMLElement[] => {
|
||||
const nav = navRef.current;
|
||||
if (!nav) return [];
|
||||
@@ -143,17 +181,37 @@ export function DesktopNav({
|
||||
[columnLinks],
|
||||
);
|
||||
|
||||
/** Open (if needed) and put focus on the first/last link of `groupId`. */
|
||||
/* Outside press. pointerdown rather than click so the column is already gone
|
||||
by the time the click lands on whatever is underneath. */
|
||||
useEffect(() => {
|
||||
if (openGroup === null) return;
|
||||
const handlePointerDown = (event: PointerEvent) => {
|
||||
if (!navRef.current?.contains(event.target as Node)) setOpenGroup(null);
|
||||
};
|
||||
document.addEventListener("pointerdown", handlePointerDown);
|
||||
return () => document.removeEventListener("pointerdown", handlePointerDown);
|
||||
}, [openGroup]);
|
||||
|
||||
/* A keyboard request to open a group and step into its column can only be
|
||||
honoured once that column has actually rendered. */
|
||||
useEffect(() => {
|
||||
const target = pendingFocus.current;
|
||||
if (openGroup === null || !target || target.groupId !== openGroup) return;
|
||||
pendingFocus.current = null;
|
||||
focusInColumn(target.groupId, target.position);
|
||||
}, [openGroup, focusInColumn]);
|
||||
|
||||
/** Open `groupId` (if needed) and put focus on its first/last link. */
|
||||
const enterColumn = useCallback(
|
||||
(groupId: string, position: ColumnPosition) => {
|
||||
if (open) {
|
||||
if (openGroup === groupId) {
|
||||
focusInColumn(groupId, position);
|
||||
return;
|
||||
}
|
||||
pendingFocus.current = { groupId, position };
|
||||
openMega();
|
||||
showGroup(groupId);
|
||||
},
|
||||
[focusInColumn, open, openMega],
|
||||
[focusInColumn, openGroup, showGroup],
|
||||
);
|
||||
|
||||
const forwardKey = direction === "rtl" ? "ArrowLeft" : "ArrowRight";
|
||||
@@ -167,6 +225,15 @@ export function DesktopNav({
|
||||
next?.focus();
|
||||
};
|
||||
|
||||
const handleTriggerClick = (groupId: string) => {
|
||||
const pointer = lastPointerType.current;
|
||||
lastPointerType.current = null;
|
||||
/* A mouse has already opened the column by hovering; a click keeps it
|
||||
open. Touch and pen have no hover, so for them a press toggles. */
|
||||
if (pointer === "mouse" || openGroup !== groupId) showGroup(groupId);
|
||||
else closeGroup();
|
||||
};
|
||||
|
||||
const handleTriggerKeyDown = (
|
||||
event: ReactKeyboardEvent<HTMLButtonElement>,
|
||||
groupId: string,
|
||||
@@ -176,7 +243,7 @@ export function DesktopNav({
|
||||
case " ":
|
||||
case "Spacebar":
|
||||
event.preventDefault();
|
||||
if (open) closeMega();
|
||||
if (openGroup === groupId) closeGroup();
|
||||
else enterColumn(groupId, "first");
|
||||
break;
|
||||
case "ArrowDown":
|
||||
@@ -205,6 +272,16 @@ export function DesktopNav({
|
||||
controls[controls.length - 1]?.focus();
|
||||
break;
|
||||
}
|
||||
case "Tab": {
|
||||
/* Into the open column, which the DOM places after the trigger row. */
|
||||
if (event.shiftKey || openGroup !== groupId) break;
|
||||
const first = columnLinks(groupId)[0];
|
||||
if (first) {
|
||||
event.preventDefault();
|
||||
first.focus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@@ -227,7 +304,7 @@ export function DesktopNav({
|
||||
if (groupIds.length === 0) return;
|
||||
const nextId =
|
||||
groupIds[(groupIndex + delta + groupIds.length) % groupIds.length];
|
||||
if (nextId) focusInColumn(nextId, "first");
|
||||
if (nextId) enterColumn(nextId, "first");
|
||||
};
|
||||
|
||||
switch (event.key) {
|
||||
@@ -256,6 +333,27 @@ export function DesktopNav({
|
||||
event.preventDefault();
|
||||
links[links.length - 1]?.focus();
|
||||
break;
|
||||
case "Tab": {
|
||||
if (event.shiftKey) {
|
||||
/* Back out of the column to the trigger that owns it. */
|
||||
if (index === 0) {
|
||||
event.preventDefault();
|
||||
triggerFor(groupId)?.focus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
/* On from the end of the column to the next top-level item, which
|
||||
closes this group. With no next item, Tab leaves the bar as usual. */
|
||||
if (index !== links.length - 1) break;
|
||||
const controls = topLevelControls();
|
||||
const trigger = triggerFor(groupId);
|
||||
const next = trigger ? controls[controls.indexOf(trigger) + 1] : undefined;
|
||||
if (next) {
|
||||
event.preventDefault();
|
||||
next.focus();
|
||||
}
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
@@ -264,29 +362,26 @@ export function DesktopNav({
|
||||
/* Escape is handled once, on the bar, so it works from a trigger and from
|
||||
inside a column. Focus goes back to the trigger that owns the column. */
|
||||
const handleNavKeyDown = (event: ReactKeyboardEvent<HTMLElement>) => {
|
||||
if (event.key !== "Escape" || !open) return;
|
||||
if (event.key !== "Escape" || openGroup === null) return;
|
||||
event.preventDefault();
|
||||
const active = document.activeElement as HTMLElement | null;
|
||||
const groupId =
|
||||
active?.closest<HTMLElement>("[data-nav-column]")?.dataset.navColumn ??
|
||||
active?.dataset.navTrigger;
|
||||
closeMega();
|
||||
if (groupId) triggerFor(groupId)?.focus();
|
||||
const groupId = openGroup;
|
||||
closeGroup();
|
||||
triggerFor(groupId)?.focus();
|
||||
};
|
||||
|
||||
/* React's onBlur is focusout, so it fires for descendants too. */
|
||||
const handleNavBlur = (event: ReactFocusEvent<HTMLElement>) => {
|
||||
const next = event.relatedTarget as Node | null;
|
||||
if (!next || !navRef.current?.contains(next)) closeMega();
|
||||
if (!next || !navRef.current?.contains(next)) closeGroup();
|
||||
};
|
||||
|
||||
const handleItemPointerEnter = (
|
||||
event: ReactPointerEvent<HTMLLIElement>,
|
||||
isGroup: boolean,
|
||||
groupId: string | null,
|
||||
) => {
|
||||
if (event.pointerType !== "mouse") return;
|
||||
if (isGroup) openMega();
|
||||
else closeMega();
|
||||
if (groupId) showGroup(groupId);
|
||||
else closeGroup();
|
||||
};
|
||||
|
||||
const handleNavPointerLeave = (event: ReactPointerEvent<HTMLElement>) => {
|
||||
@@ -298,7 +393,7 @@ export function DesktopNav({
|
||||
<nav
|
||||
ref={navRef}
|
||||
aria-label={strings.primaryNavLabel}
|
||||
data-mega-open={open ? "true" : "false"}
|
||||
data-mega-open={openGroup !== null ? "true" : "false"}
|
||||
className={cx("relative", className)}
|
||||
onPointerEnter={clearCloseTimer}
|
||||
onPointerLeave={handleNavPointerLeave}
|
||||
@@ -314,128 +409,132 @@ export function DesktopNav({
|
||||
return (
|
||||
<li
|
||||
key={item.id}
|
||||
className="flex"
|
||||
onPointerEnter={(event) => handleItemPointerEnter(event, group)}
|
||||
className="relative flex"
|
||||
onPointerEnter={(event) =>
|
||||
handleItemPointerEnter(event, group ? item.id : null)
|
||||
}
|
||||
>
|
||||
{group ? (
|
||||
<button
|
||||
type="button"
|
||||
id={triggerId(item.id)}
|
||||
data-nav-top=""
|
||||
data-nav-trigger={item.id}
|
||||
data-current={hasCurrentChild ? "true" : undefined}
|
||||
aria-expanded={open}
|
||||
aria-controls={panelId(item.id)}
|
||||
onFocus={openMega}
|
||||
onClick={() => (open ? closeMega() : openMega())}
|
||||
onKeyDown={(event) => handleTriggerKeyDown(event, item.id)}
|
||||
className={cx(
|
||||
"body-md-bold cursor-pointer whitespace-nowrap pb-[2px]",
|
||||
"text-start text-[var(--text-primary)]",
|
||||
"hover:text-[var(--text-accent)]",
|
||||
"data-[current=true]:text-[var(--text-accent)]",
|
||||
HOVER_TRANSITION,
|
||||
FOCUS_RING,
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</button>
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
id={triggerId(item.id)}
|
||||
data-nav-top=""
|
||||
data-nav-trigger={item.id}
|
||||
data-current={hasCurrentChild ? "true" : undefined}
|
||||
aria-expanded={openGroup === item.id}
|
||||
aria-controls={panelId(item.id)}
|
||||
onFocus={() => {
|
||||
/* Moving to another trigger closes the one left behind. */
|
||||
if (openGroup !== null && openGroup !== item.id) closeGroup();
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
lastPointerType.current = event.pointerType;
|
||||
}}
|
||||
onClick={() => handleTriggerClick(item.id)}
|
||||
onKeyDown={(event) => handleTriggerKeyDown(event, item.id)}
|
||||
className={cx(
|
||||
"body-sm-bold flex cursor-pointer items-center gap-2xs",
|
||||
"whitespace-nowrap pb-[2px] text-start",
|
||||
"text-[var(--text-primary)]",
|
||||
"hover:text-[var(--text-accent)]",
|
||||
"aria-expanded:text-[var(--text-accent)]",
|
||||
"data-[current=true]:text-[var(--text-accent)]",
|
||||
HOVER_TRANSITION,
|
||||
FOCUS_RING,
|
||||
)}
|
||||
>
|
||||
<span>{item.label}</span>
|
||||
<Chevron />
|
||||
</button>
|
||||
|
||||
{/* The section the reader is inside keeps a 2px accent rule
|
||||
under its trigger, as the draft draws it. Decorative -
|
||||
`data-current` on the trigger carries the state. */}
|
||||
{hasCurrentChild ? (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 bottom-0 h-[2px] bg-[var(--surface-accent)]"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
{/* The draft's dropdown is a compact card hanging from its
|
||||
own trigger, not a full-width mega bar. `start-[-1rem]`
|
||||
pulls the card back by its own padding so a child label
|
||||
lines up with the trigger label above it; being a logical
|
||||
inset, it mirrors in Arabic on its own. */}
|
||||
<ul
|
||||
id={panelId(item.id)}
|
||||
aria-labelledby={triggerId(item.id)}
|
||||
hidden={openGroup !== item.id}
|
||||
className={cx(
|
||||
"sh-nav-menu absolute top-full start-[-1rem] z-[var(--layer-dropdown)]",
|
||||
"mt-sm flex min-w-[17.875rem] flex-col",
|
||||
"rounded-control border border-[var(--border-subtle)]",
|
||||
"bg-[var(--surface-raised)] p-xs",
|
||||
"shadow-[var(--elevation-popover)]",
|
||||
)}
|
||||
>
|
||||
{item.children.map((child) => (
|
||||
<li key={child.id}>
|
||||
<Link
|
||||
to={child.href}
|
||||
data-nav-sublink=""
|
||||
aria-current={
|
||||
isCurrentPath(child.href, pathname) ? "page" : undefined
|
||||
}
|
||||
onKeyDown={(event) => handleSubLinkKeyDown(event, item.id)}
|
||||
className={cx(
|
||||
"body-sm-bold flex items-center justify-between gap-md",
|
||||
"rounded-control px-sm py-xs no-underline",
|
||||
"text-[var(--text-primary)]",
|
||||
"hover:bg-[var(--surface-page)] hover:text-[var(--text-accent)]",
|
||||
"aria-[current=page]:text-[var(--text-accent)]",
|
||||
HOVER_TRANSITION,
|
||||
FOCUS_RING,
|
||||
)}
|
||||
>
|
||||
<span>{child.label}</span>
|
||||
<MenuArrow />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</>
|
||||
) : (
|
||||
<Link
|
||||
to={item.href}
|
||||
data-nav-top=""
|
||||
aria-current={
|
||||
isCurrentPath(item.href, pathname) ? "page" : undefined
|
||||
}
|
||||
onFocus={closeMega}
|
||||
className={cx(
|
||||
"body-md-bold whitespace-nowrap pb-[2px] no-underline",
|
||||
"text-[var(--text-primary)]",
|
||||
"hover:text-[var(--text-accent)]",
|
||||
"aria-[current=page]:text-[var(--text-accent)]",
|
||||
"aria-[current=page]:underline aria-[current=page]:decoration-2",
|
||||
"aria-[current=page]:underline-offset-4",
|
||||
HOVER_TRANSITION,
|
||||
FOCUS_RING,
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
<>
|
||||
<Link
|
||||
to={item.href}
|
||||
data-nav-top=""
|
||||
aria-current={
|
||||
isCurrentPath(item.href, pathname) ? "page" : undefined
|
||||
}
|
||||
onFocus={closeGroup}
|
||||
className={cx(
|
||||
"body-sm-bold whitespace-nowrap pb-[2px] no-underline",
|
||||
"text-[var(--text-primary)]",
|
||||
"hover:text-[var(--text-accent)]",
|
||||
"aria-[current=page]:text-[var(--text-accent)]",
|
||||
HOVER_TRANSITION,
|
||||
FOCUS_RING,
|
||||
)}
|
||||
>
|
||||
{item.label}
|
||||
</Link>
|
||||
|
||||
{isCurrentPath(item.href, pathname) ? (
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="absolute inset-x-0 bottom-0 h-[2px] bg-[var(--surface-accent)]"
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
|
||||
{/* Mega panel. Anchored to the bar's inline start so the columns share the
|
||||
trigger row's origin and gap; `start-0` mirrors on its own in Arabic. */}
|
||||
<div hidden={!open} className="absolute start-0 top-full w-full">
|
||||
{/* One full-bleed backdrop for all columns, so the surface and its
|
||||
bottom edge are a single unbroken rectangle. The header clips the
|
||||
horizontal bleed with overflow-x-clip, which leaves the vertical
|
||||
overflow visible. */}
|
||||
<div
|
||||
aria-hidden="true"
|
||||
className={cx(
|
||||
"absolute inset-y-0 start-[-50vw] end-[-50vw]",
|
||||
"border-b border-[var(--border-subtle)] bg-[var(--surface-page)]",
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className={cx("relative flex pb-lg", ROW_GAP)}>
|
||||
{items.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
data-nav-column={item.id}
|
||||
className="flex flex-col"
|
||||
>
|
||||
{/* Width setter: an invisible copy of the trigger label in the
|
||||
same type role, so this column is exactly as wide as its
|
||||
trigger. It is h-0, so it adds no height. */}
|
||||
<span
|
||||
aria-hidden="true"
|
||||
className="body-md-bold invisible block h-0 overflow-hidden whitespace-nowrap"
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
|
||||
{isNavGroup(item) && (
|
||||
/* w-0 keeps the list out of the column's max-content width;
|
||||
min-w-full then stretches it back, so long child labels wrap
|
||||
inside the trigger's width exactly as they do in Figma. */
|
||||
<ul
|
||||
id={panelId(item.id)}
|
||||
aria-labelledby={triggerId(item.id)}
|
||||
className="flex w-0 min-w-full flex-col gap-sm pt-md"
|
||||
>
|
||||
{item.children.map((child) => (
|
||||
<li key={child.id}>
|
||||
<Link
|
||||
to={child.href}
|
||||
data-nav-sublink=""
|
||||
aria-current={
|
||||
isCurrentPath(child.href, pathname) ? "page" : undefined
|
||||
}
|
||||
onKeyDown={(event) => handleSubLinkKeyDown(event, item.id)}
|
||||
className={cx(
|
||||
"body-md block no-underline",
|
||||
"text-[var(--text-secondary)]",
|
||||
"hover:text-[var(--text-primary)]",
|
||||
"aria-[current=page]:text-[var(--text-accent)]",
|
||||
HOVER_TRANSITION,
|
||||
FOCUS_RING,
|
||||
)}
|
||||
>
|
||||
{child.label}
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user