IllusionandClaude Opus 5
aedef6daeb
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>
347 lines
11 KiB
TypeScript
347 lines
11 KiB
TypeScript
import {
|
|
useCallback,
|
|
useEffect,
|
|
useId,
|
|
useRef,
|
|
useState,
|
|
type KeyboardEvent as ReactKeyboardEvent,
|
|
} from "react";
|
|
import { Link } from "react-router";
|
|
|
|
import { EuBadge } from "../EuBadge";
|
|
import { LanguageSwitcher, isCurrentPath, type Locale } from "../LanguageSwitcher";
|
|
|
|
import { Brand } from "./Brand";
|
|
import { MenuBars } from "./MenuBars";
|
|
import { cx, FOCUS_RING, HOVER_TRANSITION } from "./styles";
|
|
import { isNavGroup, type NavItem, type NavigationStrings, type NavSurface } from "./types";
|
|
|
|
/** Must stay in step with the `xl:` variants below (Tailwind xl = 80rem). */
|
|
const DESKTOP_MEDIA_QUERY = "(min-width: 80rem)";
|
|
|
|
const FOCUSABLE_SELECTOR = [
|
|
"a[href]",
|
|
"button:not([disabled])",
|
|
"input:not([disabled])",
|
|
"select:not([disabled])",
|
|
"textarea:not([disabled])",
|
|
'[tabindex]:not([tabindex="-1"])',
|
|
].join(", ");
|
|
|
|
function focusablesIn(root: HTMLElement): HTMLElement[] {
|
|
return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)).filter(
|
|
(element) => !element.hasAttribute("hidden") && element.getClientRects().length > 0,
|
|
);
|
|
}
|
|
|
|
export interface MobileNavProps {
|
|
items: readonly NavItem[];
|
|
pathname: string;
|
|
search?: string;
|
|
hash?: string;
|
|
locale: Locale;
|
|
strings: NavigationStrings;
|
|
surface: NavSurface;
|
|
/** Locale-prefixed home path for the logo inside the drawer. */
|
|
homeHref: string;
|
|
showLanguageSwitcher: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* Hamburger trigger plus the full-screen drawer it opens.
|
|
*
|
|
* While the drawer is open, focus is trapped inside it, everything behind it is
|
|
* `inert` (so assistive technology cannot browse the page under an aria-modal
|
|
* dialog either), the page behind cannot scroll, Escape closes it, and focus
|
|
* returns to the hamburger on close.
|
|
*/
|
|
export function MobileNav({
|
|
items,
|
|
pathname,
|
|
search,
|
|
hash,
|
|
locale,
|
|
strings,
|
|
surface,
|
|
homeHref,
|
|
showLanguageSwitcher,
|
|
className,
|
|
}: MobileNavProps) {
|
|
const [open, setOpen] = useState(false);
|
|
const triggerRef = useRef<HTMLButtonElement>(null);
|
|
const closeRef = useRef<HTMLButtonElement>(null);
|
|
const drawerRef = useRef<HTMLDivElement>(null);
|
|
const wasOpen = useRef(false);
|
|
|
|
const rawId = useId();
|
|
const baseId = `sharper-drawer-${rawId.replace(/[^a-zA-Z0-9_-]/g, "")}`;
|
|
const drawerId = `${baseId}-panel`;
|
|
const headingId = (groupId: string) => `${baseId}-${groupId}-heading`;
|
|
|
|
const close = useCallback(() => setOpen(false), []);
|
|
|
|
/* Focus in on open, and back to the hamburger on close. */
|
|
useEffect(() => {
|
|
if (open) {
|
|
wasOpen.current = true;
|
|
closeRef.current?.focus();
|
|
} else if (wasOpen.current) {
|
|
wasOpen.current = false;
|
|
triggerRef.current?.focus();
|
|
}
|
|
}, [open]);
|
|
|
|
/* The drawer is aria-modal, so the rest of the page has to be inert as well -
|
|
otherwise a screen reader still browses the header, main and footer behind
|
|
it. Rather than naming those landmarks (the drawer is itself rendered
|
|
inside the header, so inerting the header would inert the drawer), every
|
|
ancestor up to <body> has its OTHER children inerted. `inert` is set as an
|
|
attribute so no DOM-lib typing is needed, and an element that was already
|
|
inert is skipped so the restore never clears someone else's flag.
|
|
|
|
This runs after the focus effect above on purpose: focus is already inside
|
|
the drawer by the time the element it came from goes inert. */
|
|
useEffect(() => {
|
|
const drawer = drawerRef.current;
|
|
if (!open || !drawer) return;
|
|
|
|
const inerted: Element[] = [];
|
|
let node: Element | null = drawer;
|
|
|
|
while (node !== null) {
|
|
const parent: HTMLElement | null = node.parentElement;
|
|
if (parent === null) break;
|
|
|
|
const siblings: Element[] = Array.from(parent.children);
|
|
for (const sibling of siblings) {
|
|
if (sibling === node || sibling.hasAttribute("inert")) continue;
|
|
sibling.setAttribute("inert", "");
|
|
inerted.push(sibling);
|
|
}
|
|
|
|
node = parent === document.body ? null : parent;
|
|
}
|
|
|
|
return () => {
|
|
for (const element of inerted) element.removeAttribute("inert");
|
|
};
|
|
}, [open]);
|
|
|
|
/* Body scroll lock. The scrollbar's width is handed back as inline-end
|
|
padding so the page behind does not jump sideways when it disappears. */
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const { body, documentElement } = document;
|
|
const previousOverflow = body.style.overflow;
|
|
const previousPadding = body.style.paddingInlineEnd;
|
|
const scrollbar = window.innerWidth - documentElement.clientWidth;
|
|
|
|
body.style.overflow = "hidden";
|
|
if (scrollbar > 0) body.style.paddingInlineEnd = `${scrollbar}px`;
|
|
|
|
return () => {
|
|
body.style.overflow = previousOverflow;
|
|
body.style.paddingInlineEnd = previousPadding;
|
|
};
|
|
}, [open]);
|
|
|
|
/* Keeps focus inside the drawer even when something moves it programmatically
|
|
(the Tab handler below covers ordinary keyboard travel). */
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
const handleFocusIn = (event: FocusEvent) => {
|
|
const drawer = drawerRef.current;
|
|
if (drawer && !drawer.contains(event.target as Node)) {
|
|
focusablesIn(drawer)[0]?.focus();
|
|
}
|
|
};
|
|
document.addEventListener("focusin", handleFocusIn);
|
|
return () => document.removeEventListener("focusin", handleFocusIn);
|
|
}, [open]);
|
|
|
|
/* The drawer is desktop-hidden; close it rather than stranding a locked body
|
|
if the viewport grows past the breakpoint while it is open. */
|
|
useEffect(() => {
|
|
if (!open || typeof window.matchMedia !== "function") return;
|
|
const query = window.matchMedia(DESKTOP_MEDIA_QUERY);
|
|
if (query.matches) {
|
|
setOpen(false);
|
|
return;
|
|
}
|
|
const handleChange = (event: MediaQueryListEvent) => {
|
|
if (event.matches) setOpen(false);
|
|
};
|
|
query.addEventListener("change", handleChange);
|
|
return () => query.removeEventListener("change", handleChange);
|
|
}, [open]);
|
|
|
|
const handleDrawerKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
|
|
if (event.key === "Escape") {
|
|
event.preventDefault();
|
|
close();
|
|
return;
|
|
}
|
|
if (event.key !== "Tab") return;
|
|
|
|
const drawer = drawerRef.current;
|
|
if (!drawer) return;
|
|
|
|
const stops = focusablesIn(drawer);
|
|
if (stops.length === 0) {
|
|
event.preventDefault();
|
|
return;
|
|
}
|
|
|
|
const first = stops[0];
|
|
const last = stops[stops.length - 1];
|
|
const active = document.activeElement;
|
|
const inside = drawer.contains(active);
|
|
|
|
if (event.shiftKey && (active === first || !inside)) {
|
|
event.preventDefault();
|
|
last?.focus();
|
|
} else if (!event.shiftKey && (active === last || !inside)) {
|
|
event.preventDefault();
|
|
first?.focus();
|
|
}
|
|
};
|
|
|
|
const linkClasses = cx(
|
|
"block rounded-control py-2xs no-underline",
|
|
"hover:text-[var(--text-accent)]",
|
|
"aria-[current=page]:text-[var(--text-accent)]",
|
|
HOVER_TRANSITION,
|
|
FOCUS_RING,
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
ref={triggerRef}
|
|
type="button"
|
|
aria-expanded={open}
|
|
aria-controls={drawerId}
|
|
aria-label={open ? strings.closeMenu : strings.openMenu}
|
|
onClick={() => setOpen((value) => !value)}
|
|
className={cx(
|
|
"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-control xl:hidden",
|
|
FOCUS_RING,
|
|
className,
|
|
)}
|
|
>
|
|
<MenuBars />
|
|
</button>
|
|
|
|
<div
|
|
id={drawerId}
|
|
ref={drawerRef}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={strings.primaryNavLabel}
|
|
hidden={!open}
|
|
data-surface={surface}
|
|
onKeyDown={handleDrawerKeyDown}
|
|
className={cx(
|
|
"fixed inset-0 z-[var(--layer-modal)] flex flex-col",
|
|
"bg-[var(--surface-page)] xl:hidden",
|
|
)}
|
|
>
|
|
{/* Mirrors the compact bar it replaces (20:220): the same 64px row and
|
|
the same gutter, so the wordmark does not shift when it opens. */}
|
|
<div className="flex h-[64px] shrink-0 items-center justify-between gap-md px-[var(--layout-gutter)]">
|
|
<Brand href={homeHref} label={strings.homeLinkLabel} surface={surface} />
|
|
<button
|
|
ref={closeRef}
|
|
type="button"
|
|
aria-label={strings.closeMenu}
|
|
onClick={close}
|
|
className={cx(
|
|
"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-control",
|
|
FOCUS_RING,
|
|
)}
|
|
>
|
|
<MenuBars open />
|
|
</button>
|
|
</div>
|
|
|
|
<nav
|
|
aria-label={strings.primaryNavLabel}
|
|
className="flex-1 overflow-y-auto px-[var(--layout-gutter)] pt-md pb-2xl"
|
|
>
|
|
<ul className="flex flex-col gap-xl">
|
|
{items.map((item) =>
|
|
isNavGroup(item) ? (
|
|
<li key={item.id}>
|
|
<h2
|
|
id={headingId(item.id)}
|
|
className="body-md-bold text-[var(--text-primary)]"
|
|
>
|
|
{item.label}
|
|
</h2>
|
|
<ul
|
|
aria-labelledby={headingId(item.id)}
|
|
className="mt-sm flex flex-col gap-2xs border-s border-[var(--border-subtle)] ps-md"
|
|
>
|
|
{item.children.map((child) => (
|
|
<li key={child.id}>
|
|
<Link
|
|
to={child.href}
|
|
onClick={close}
|
|
aria-current={
|
|
isCurrentPath(child.href, pathname) ? "page" : undefined
|
|
}
|
|
className={cx(
|
|
linkClasses,
|
|
"body-md text-[var(--text-secondary)]",
|
|
)}
|
|
>
|
|
{child.label}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</li>
|
|
) : (
|
|
<li key={item.id}>
|
|
<Link
|
|
to={item.href}
|
|
onClick={close}
|
|
aria-current={
|
|
isCurrentPath(item.href, pathname) ? "page" : undefined
|
|
}
|
|
className={cx(
|
|
linkClasses,
|
|
"body-md-bold text-[var(--text-primary)]",
|
|
)}
|
|
>
|
|
{item.label}
|
|
</Link>
|
|
</li>
|
|
),
|
|
)}
|
|
</ul>
|
|
</nav>
|
|
|
|
<div className="flex shrink-0 flex-wrap items-center justify-between gap-md border-t border-[var(--border-subtle)] px-[var(--layout-gutter)] py-lg">
|
|
<EuBadge
|
|
statement={strings.euStatement}
|
|
emblemAlt={strings.euEmblemAlt}
|
|
locale={locale}
|
|
surface={surface}
|
|
/>
|
|
{showLanguageSwitcher && (
|
|
<LanguageSwitcher
|
|
locale={locale}
|
|
pathname={pathname}
|
|
search={search}
|
|
hash={hash}
|
|
size="md"
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|