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>
196 lines
6.9 KiB
TypeScript
196 lines
6.9 KiB
TypeScript
import { useMemo } from "react";
|
|
|
|
import {
|
|
buildLocalizedHref,
|
|
getDirection,
|
|
LanguageToggle,
|
|
type Locale,
|
|
} from "../LanguageSwitcher";
|
|
|
|
import { Brand } from "./Brand";
|
|
import { DesktopNav } from "./DesktopNav";
|
|
import { MobileNav } from "./MobileNav";
|
|
import { getDefaultNavItems, getNavigationStrings } from "./nav-items";
|
|
import { cx } from "./styles";
|
|
import type { NavItem, NavigationStrings, NavSurface } from "./types";
|
|
|
|
export interface NavigationProps {
|
|
/** Reading locale. Drives the copy, the default hrefs and the arrow keys. */
|
|
locale?: Locale;
|
|
/** Current pathname, e.g. "/ar/contact". Used for aria-current="page". */
|
|
pathname: string;
|
|
/** Query string, carried across a language switch. */
|
|
search?: string;
|
|
/** Fragment, carried across a language switch. */
|
|
hash?: string;
|
|
/**
|
|
* The navigation tree. The app shell feeds this from the Strapi
|
|
* site-settings single type; omitting it renders the typed default IA.
|
|
*/
|
|
items?: readonly NavItem[];
|
|
/** Which tier-2 surface the bar paints. `:root` is dark, so dark is default. */
|
|
surface?: NavSurface;
|
|
/** Override any of the navigation's own strings (e.g. from the CMS). */
|
|
strings?: Partial<NavigationStrings>;
|
|
/** Where the logo links. Defaults to the locale home, "/en" or "/ar". */
|
|
homeHref?: string;
|
|
showLanguageSwitcher?: boolean;
|
|
/** Stick the bar to the top of the viewport. */
|
|
sticky?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* The SHARP-ER site navigation - Figma frame 20:236.
|
|
*
|
|
* Three slots, spread across the bar: the wordmark at the inline start, the
|
|
* mega-menu groups in the middle, and the language globe at the inline end.
|
|
* Everything is laid out with logical properties, so the Arabic bar mirrors
|
|
* (logo right, globe left) from `<html dir="rtl">` alone - there is no separate
|
|
* Arabic component, which is what variants 334:526 and 334:764 show.
|
|
*
|
|
* Below the xl breakpoint the bar collapses to wordmark + hamburger (20:220)
|
|
* and the whole tree moves into a full-screen drawer.
|
|
*
|
|
* EU VISIBILITY: the updated design has no funding badge in the bar - the
|
|
* Actions slot holds the language globe alone. The mandatory "Funded by the
|
|
* European Union" lockup is carried by <Footer />, which renders on every page,
|
|
* and by the mobile drawer; it is not dropped from the site.
|
|
*/
|
|
export function Navigation({
|
|
locale = "en",
|
|
pathname,
|
|
search,
|
|
hash,
|
|
items,
|
|
surface = "dark",
|
|
strings: stringOverrides,
|
|
homeHref,
|
|
showLanguageSwitcher = true,
|
|
sticky = true,
|
|
className,
|
|
}: NavigationProps) {
|
|
const navItems = useMemo(
|
|
() => items ?? getDefaultNavItems(locale),
|
|
[items, locale],
|
|
);
|
|
const strings = useMemo(
|
|
() => getNavigationStrings(locale, stringOverrides),
|
|
[locale, stringOverrides],
|
|
);
|
|
|
|
const resolvedHomeHref = homeHref ?? buildLocalizedHref("/", locale);
|
|
const direction = getDirection(locale);
|
|
|
|
return (
|
|
<header
|
|
data-surface={surface}
|
|
className={cx(
|
|
"w-full border-b border-[var(--border-subtle)]",
|
|
/* Translucent ground + blur, as the drafts draw the bar. */
|
|
"bg-[var(--surface-nav)] backdrop-blur-[14px]",
|
|
sticky && "sticky top-0 z-[var(--layer-header)]",
|
|
className,
|
|
)}
|
|
>
|
|
<div
|
|
className={cx(
|
|
"mx-auto flex w-full max-w-[var(--layout-content-max)] items-center justify-between",
|
|
/* Mobile 20:220 is a fixed 64px bar; the gutter is the site's own
|
|
rather than the frame's 20px, so the wordmark lines up with the
|
|
page content underneath it. */
|
|
"h-[64px] gap-md px-[var(--layout-gutter)]",
|
|
/* The drafts pad the bar with the same gutter every section uses, so
|
|
the wordmark sits directly above the page's content edge. */
|
|
"xl:h-auto xl:gap-lg xl:px-[var(--layout-gutter-lg)] xl:py-sm",
|
|
)}
|
|
>
|
|
<Brand
|
|
href={resolvedHomeHref}
|
|
label={strings.homeLinkLabel}
|
|
surface={surface}
|
|
/>
|
|
|
|
<DesktopNav
|
|
items={navItems}
|
|
pathname={pathname}
|
|
strings={strings}
|
|
direction={direction}
|
|
className="hidden xl:block"
|
|
/>
|
|
|
|
<div className="flex items-center gap-md">
|
|
{/* The globe is desktop-only: the mobile bar (20:220) is wordmark +
|
|
hamburger, and the drawer carries the switcher instead. Visibility
|
|
lives on this wrapper rather than on the child, because two
|
|
display utilities on one element are resolved by the order
|
|
Tailwind emits them, not by class-attribute order. */}
|
|
{showLanguageSwitcher && (
|
|
/* Figma 555:3848 sets a 20px rule between the links and the
|
|
actions, then 24px to the globe. It is decorative, so it is
|
|
hidden from assistive technology and drawn with a border token
|
|
rather than a rule element. */
|
|
<div className="hidden items-center gap-lg xl:flex">
|
|
<span
|
|
aria-hidden="true"
|
|
className="h-5 w-px bg-[var(--border-default)]"
|
|
/>
|
|
|
|
{/* Both languages side by side, per the redesign's nav: the
|
|
current one chipped, the other one link. */}
|
|
<LanguageToggle
|
|
label={strings.languageMenuLabel}
|
|
locale={locale}
|
|
pathname={pathname}
|
|
search={search}
|
|
hash={hash}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
<MobileNav
|
|
items={navItems}
|
|
pathname={pathname}
|
|
search={search}
|
|
hash={hash}
|
|
locale={locale}
|
|
strings={strings}
|
|
surface={surface}
|
|
homeHref={resolvedHomeHref}
|
|
showLanguageSwitcher={showLanguageSwitcher}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Navigation;
|
|
|
|
/* ---------------------------------------------------------------------------
|
|
USAGE
|
|
---------------------------------------------------------------------------
|
|
// Dark bar on the dark home page, default IA, English:
|
|
<Navigation locale="en" pathname="/en" />
|
|
|
|
// Arabic. The bar mirrors from <html dir="rtl"> - no extra props, no
|
|
// separate component - and the arrow keys mirror with it.
|
|
<Navigation locale="ar" pathname="/ar/contact" />
|
|
|
|
// Light bar on an interior page:
|
|
<Navigation locale="en" pathname="/en/about" surface="light" />
|
|
|
|
// Fed from Strapi site-settings, with the CMS owning the labels and hrefs:
|
|
<Navigation
|
|
locale={locale}
|
|
pathname={pathname}
|
|
items={siteSettings.navigation}
|
|
strings={{ euStatement: siteSettings.euFundingStatement }}
|
|
/>
|
|
|
|
// Wired from a route, using the router's own location so a language switch
|
|
// keeps the query string and fragment:
|
|
const { pathname, search, hash } = useLocation();
|
|
<Navigation locale={locale} pathname={pathname} search={search} hash={hash} />
|
|
------------------------------------------------------------------------ */
|