CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Give the shell one header, a skip link, and a cookie-aware first paint.

Browse Source 
Breakpoint clones were still in the tab order, marketing always painted Log in, and at 430px the logo overlay covered Use cases and Learn.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-09-09 17:12:59 -06:00
co-authored by Cursor
parent aecb890cc8
commit 5242f8c6bb
22 changed files with 309 additions and 320 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(admin)/layout.tsx
+10 -1
View File
@@ -1,9 +1,11 @@
import type { Metadata } from "next";
import { Suspense, type ReactNode } from "react";
import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
import SkipToContent from "../components/navigation/SkipToContent";
import { MessagesProvider } from "../contexts/MessagesContext";
import { AuthModalProvider } from "../contexts/AuthModalContext";
import messages from "../../messages/en/index";
import { MAIN_CONTENT_ID } from "../../lib/mainContent";
import { NO_INDEX_ROBOTS } from "../../lib/siteMetadata";
export const metadata: Metadata = {
@@ -20,10 +22,17 @@ export default function AdminLayout({ children }: { children: ReactNode }) {
return (
<MessagesProvider messages={messages}>
<AuthModalProvider>
<SkipToContent />
<Suspense fallback={null}>
<ConditionalNavigation />
</Suspense>
<main className="flex-1">{children}</main>
<main
id={MAIN_CONTENT_ID}
tabIndex={-1}
className="flex-1 outline-none"
>
{children}
</main>
</AuthModalProvider>
</MessagesProvider>
);
app/(app)/layout.tsx
+10 -1
View File
@@ -1,9 +1,11 @@
import type { Metadata } from "next";
import { Suspense, type ReactNode } from "react";
import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
import SkipToContent from "../components/navigation/SkipToContent";
import { MessagesProvider } from "../contexts/MessagesContext";
import { AuthModalProvider } from "../contexts/AuthModalContext";
import messages from "../../messages/en/index";
import { MAIN_CONTENT_ID } from "../../lib/mainContent";
import { NO_INDEX_ROBOTS } from "../../lib/siteMetadata";
export const metadata: Metadata = {
@@ -27,10 +29,17 @@ export default function AppLayout({ children }: { children: ReactNode }) {
return (
<MessagesProvider messages={messages}>
<AuthModalProvider>
<SkipToContent />
<Suspense fallback={null}>
<ConditionalNavigation />
</Suspense>
<main className="flex-1">{children}</main>
<main
id={MAIN_CONTENT_ID}
tabIndex={-1}
className="flex-1 outline-none"
>
{children}
</main>
</AuthModalProvider>
</MessagesProvider>
);
app/(dev)/layout.tsx
+8 -1
View File
@@ -4,6 +4,7 @@ import { notFound } from "next/navigation";
import { MessagesProvider } from "../contexts/MessagesContext";
import { AuthModalProvider } from "../contexts/AuthModalContext";
import messages from "../../messages/en/index";
import { MAIN_CONTENT_ID } from "../../lib/mainContent";
import { NO_INDEX_ROBOTS } from "../../lib/siteMetadata";
export const metadata: Metadata = {
@@ -18,7 +19,13 @@ export default function DevLayout({ children }: { children: ReactNode }) {
return (
<MessagesProvider messages={messages}>
<AuthModalProvider>
<main className="flex-1">{children}</main>
<main
id={MAIN_CONTENT_ID}
tabIndex={-1}
className="flex-1 outline-none"
>
{children}
</main>
</AuthModalProvider>
</MessagesProvider>
);
app/(marketing)/layout.tsx
+15 -6
View File
@@ -1,8 +1,10 @@
import dynamic from "next/dynamic";
import { Suspense, type ReactNode } from "react";
import MarketingNavigation from "../components/navigation/MarketingNavigation";
import ConditionalNavigation from "../components/navigation/ConditionalNavigation";
import SkipToContent from "../components/navigation/SkipToContent";
import { MessagesProvider } from "../contexts/MessagesContext";
import { AuthModalProvider } from "../contexts/AuthModalContext";
import { MAIN_CONTENT_ID } from "../../lib/mainContent";
import marketingMessages from "../../messages/en/marketing";
// Site footer is part of the public marketing chrome only — not rendered for
@@ -20,14 +22,21 @@ export default function MarketingLayout({ children }: { children: ReactNode }) {
<MessagesProvider messages={marketingMessages}>
<AuthModalProvider>
{/*
* MarketingNavigation reads `usePathname()` to decide chromeless paths
* (uncached data under `cacheComponents`). Suspense lets the static
* shell prerender; the nav streams in with the correct visibility.
* Same session-aware shell as `(app)` / `(admin)`: `ConditionalNavigation`
* reads the cookie behind Suspense so the static page shell can prerender
* while the header streams signed-in vs signed-out correctly.
*/}
<SkipToContent />
<Suspense fallback={null}>
<MarketingNavigation />
<ConditionalNavigation />
</Suspense>
<main className="flex-1">{children}</main>
<main
id={MAIN_CONTENT_ID}
tabIndex={-1}
className="flex-1 outline-none"
>
{children}
</main>
<Footer />
</AuthModalProvider>
</MessagesProvider>
app/(marketing-case-study)/layout.tsx
+6 -1
View File
@@ -1,6 +1,7 @@
import type { ReactNode } from "react";
import { MessagesProvider } from "../contexts/MessagesContext";
import { AuthModalProvider } from "../contexts/AuthModalContext";
import { MAIN_CONTENT_ID } from "../../lib/mainContent";
import marketingMessages from "../../messages/en/marketing";
/** Full-viewport case-study surfaces (completed rule demos) — no marketing footer. */
@@ -12,7 +13,11 @@ export default function MarketingCaseStudyLayout({
return (
<MessagesProvider messages={marketingMessages}>
<AuthModalProvider>
<main className="flex h-dvh min-h-0 flex-col overflow-hidden">
<main
id={MAIN_CONTENT_ID}
tabIndex={-1}
className="flex h-dvh min-h-0 flex-col overflow-hidden outline-none"
>
{children}
</main>
</AuthModalProvider>
app/components/asset/Logo/Logo.tsx
+1 -1
View File
@@ -95,7 +95,7 @@ const Logo = memo<LogoProps>(
const wordmarkVisibilityClass =
size === "topNavFolderTop" || size === "topNavHeader"
? wordmark
? "hidden sm:block"
? "hidden md:block"
: "hidden"
: wordmark
? ""
app/components/navigation/MarketingNavigation.tsx
-27
View File
@@ -1,27 +0,0 @@
"use client";
import { memo } from "react";
import { usePathname } from "next/navigation";
import { isChromelessNavigationPath } from "../../../lib/navigationChromelessPath";
import TopWithPathname from "./Top/TopWithPathname";
/**
* Marketing-only navigation. Skips the server-side `getNavAuthSignedIn()` call
* so marketing pages can render statically (no `force-dynamic`); `TopWithPathname`
* fetches `/api/auth/session` on mount and updates the header from "Log in" to
* "Profile" when the user is signed in. Brief mismatch is acceptable here —
* `(app)` / `(admin)` keep the server-rendered nav.
*/
const MarketingNavigation = memo(() => {
const pathname = usePathname();
if (isChromelessNavigationPath(pathname)) {
return null;
}
return <TopWithPathname initialSignedIn={false} />;
});
MarketingNavigation.displayName = "MarketingNavigation";
export default MarketingNavigation;
app/components/navigation/SkipToContent.tsx
+14
View File
@@ -0,0 +1,14 @@
import header from "../../../messages/en/components/header.json";
import { MAIN_CONTENT_ID } from "../../../lib/mainContent";
/**
* First focusable control in the shell. Revealed on focus so keyboard users
* can bypass the header and land on the group `<main>`.
*/
export default function SkipToContent() {
return (
<a href={`#${MAIN_CONTENT_ID}`} className="skip-to-content text-medium-label">
{header.skipToContent}
</a>
);
}
app/components/navigation/Top/Top.container.tsx
+43 -60
View File
@@ -15,18 +15,7 @@ import Avatar from "../../asset/Avatar";
import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
import { prepareFreshCreateFlowEntrySync } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
import { TopView } from "./Top.view";
import type { TopProps, NavSize } from "./Top.types";
type MenuClusterSize = "X Small" | "Small" | "Medium" | "Large" | "X Large";
/** Map responsive `NavSize` breakpoints to Figma menu item sizes (shared by nav links + login). */
const NAV_SIZE_TO_MENU_ITEM_SIZE: Record<NavSize, MenuClusterSize> = {
xsmall: "X Small",
homeMd: "Medium",
large: "Large",
homeXlarge: "X Large",
xlarge: "X Large",
};
import type { TopProps } from "./Top.types";
export const avatarImageSources = [
getAssetPath(ASSETS.AVATAR_3),
@@ -40,6 +29,16 @@ export const avatarImages = avatarImageSources.map((src, index) => ({
alt: `Avatar ${3 - index}`,
}));
/** Padding/type that tracks lg/xl Menu sizes without cloning the items per breakpoint. */
const NAV_ITEM_RESPONSIVE_CLASS =
"lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
const FOLDER_NAV_ITEM_RESPONSIVE_CLASS =
"md:px-[var(--spacing-scale-008)] md:py-[var(--spacing-scale-008)] md:h-[32px] md:text-x-small-label lg:px-[var(--spacing-scale-016)] lg:py-[var(--spacing-scale-016)] lg:h-[44px] lg:text-medium-label xl:text-x-large-label";
const CREATE_RULE_RESPONSIVE_CLASS =
"lg:p-[var(--spacing-scale-012)] lg:gap-[var(--spacing-scale-006)] lg:text-medium-label xl:p-[var(--spacing-scale-016)] xl:gap-[var(--spacing-scale-008)] xl:text-x-large-label";
const TopContainer = memo<TopProps>(
({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
const pathname = usePathname();
@@ -61,7 +60,6 @@ const TopContainer = memo<TopProps>(
router.push("/create/informational");
}, [loggedIn, router]);
// Schema markup for site navigation
const schemaData = {
"@context": "https://schema.org",
"@type": "WebSite",
@@ -77,32 +75,32 @@ const TopContainer = memo<TopProps>(
},
};
// Logo size based on folderTop prop
const logoSize = folderTop ? "topNavFolderTop" : "topNavHeader";
// Navigation items with translations
const navigationItems = [
{ href: "/use-cases", text: t("navigation.useCases"), extraPadding: true },
{ href: "/learn", text: t("navigation.learn") },
{ href: "/about", text: t("navigation.about") },
];
const renderNavigationItems = (size: NavSize) => {
const renderNavigationItems = () => {
const mode = folderTop ? "inverse" : "default";
const sizeClass = folderTop
? FOLDER_NAV_ITEM_RESPONSIVE_CLASS
: NAV_ITEM_RESPONSIVE_CLASS;
return navigationItems.map((item, index) => {
const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
return navigationItems.map((item) => {
const isUseCases = item.extraPadding === true;
return (
<MenuItem
key={index}
key={item.href}
href={item.href}
size={itemSize}
size="X Small"
mode={mode}
state={pathname === item.href ? "selected" : "default"}
reducedPadding={isUseCases}
className={sizeClass}
ariaLabel={t("ariaLabels.navigateToPage").replace(
"{text}",
item.text,
@@ -114,34 +112,7 @@ const TopContainer = memo<TopProps>(
});
};
const renderAvatarGroup = (
containerSize: "small" | "medium" | "large" | "xlarge",
avatarSize: "small" | "medium" | "large" | "xlarge",
) => {
return (
<AvatarContainer size={containerSize}>
{avatarImageSources.map((src, index) => (
<Avatar
key={index}
src={src}
alt={tTopNav(`avatarAlts.${3 - index}`)}
size={avatarSize}
/>
))}
</AvatarContainer>
);
};
const renderLoginButton = (size: NavSize) => {
const itemSize = NAV_SIZE_TO_MENU_ITEM_SIZE[size];
// Determine mode based on folderTop and breakpoint size
// folderTop: inverse mode (black text) for smallest breakpoints (xsmall/home)
// folderTop: default mode (yellow text) for 640px+ breakpoints (homeMd/large/homeXlarge/xlarge)
// false folderTop: always default mode (yellow text on dark background)
const isSmallBreakpoint = size === "xsmall";
const mode = folderTop && isSmallBreakpoint ? "inverse" : "default";
const renderLoginButton = () => {
const label = loggedIn ? t("buttons.profile") : t("buttons.logIn");
const ariaLabel = loggedIn
? t("ariaLabels.goToProfile")
@@ -154,9 +125,10 @@ const TopContainer = memo<TopProps>(
return (
<MenuItem
href="/profile"
size={itemSize}
mode={mode}
size="X Small"
mode="default"
state={navSelected ? "selected" : "default"}
className={NAV_ITEM_RESPONSIVE_CLASS}
ariaLabel={ariaLabel}
>
{label}
@@ -174,9 +146,10 @@ const TopContainer = memo<TopProps>(
})
}
href="/login"
size={itemSize}
mode={mode}
size="X Small"
mode="default"
state={navSelected ? "selected" : "default"}
className={NAV_ITEM_RESPONSIVE_CLASS}
ariaLabel={ariaLabel}
>
{label}
@@ -184,20 +157,30 @@ const TopContainer = memo<TopProps>(
);
};
const renderCreateRuleButton = (
buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
containerSize: "small" | "medium" | "large" | "xlarge",
avatarSize: "small" | "medium" | "large" | "xlarge",
) => {
const renderCreateRuleButton = () => {
return (
<Button
size={buttonSize}
size="xsmall"
buttonType="filled"
palette="inverse"
onClick={handleCreateRuleClick}
ariaLabel={t("ariaLabels.createNewRule")}
className={CREATE_RULE_RESPONSIVE_CLASS}
>
{renderAvatarGroup(containerSize, avatarSize)}
<AvatarContainer
size="small"
className="lg:-space-x-[var(--spacing-scale-010)] xl:-space-x-[13px]"
>
{avatarImageSources.map((src, index) => (
<Avatar
key={src}
src={src}
alt={tTopNav(`avatarAlts.${3 - index}`)}
size="small"
className="lg:h-[var(--spacing-scale-024)] lg:w-[var(--spacing-scale-024)] xl:h-[var(--spacing-scale-032)] xl:w-[var(--spacing-scale-032)]"
/>
))}
</AvatarContainer>
<span>{t("buttons.createRule")}</span>
</Button>
);
app/components/navigation/Top/Top.types.ts
+3 -15
View File
@@ -9,14 +9,6 @@ export interface TopProps {
logIn?: boolean;
}
/** Breakpoint slot passed from {@link Top.view} into nav render helpers. */
export type NavSize =
| "xsmall"
| "homeMd"
| "large"
| "homeXlarge"
| "xlarge";
export interface TopViewProps {
folderTop: boolean;
loggedIn: boolean;
@@ -35,11 +27,7 @@ export interface TopViewProps {
};
};
logoSize: "topNavFolderTop" | "topNavHeader";
renderNavigationItems: (_size: NavSize) => React.ReactNode;
renderLoginButton: (_size: NavSize) => React.ReactNode;
renderCreateRuleButton: (
_buttonSize: "xsmall" | "small" | "medium" | "large" | "xlarge",
_containerSize: "small" | "medium" | "large" | "xlarge",
_avatarSize: "small" | "medium" | "large" | "xlarge",
) => React.ReactNode;
renderNavigationItems: () => React.ReactNode;
renderLoginButton: () => React.ReactNode;
renderCreateRuleButton: () => React.ReactNode;
}
app/components/navigation/Top/Top.view.tsx
+50 -184
View File
@@ -22,7 +22,12 @@ function TopView({
}: TopViewProps) {
const t = useTranslation(folderTop ? "homeHeader" : "header");
// Render folderTop variant (HomeHeader style)
const loginControl = logIn ? (
<Menu size="X Small" className="lg:gap-[var(--spacing-scale-012)]">
{renderLoginButton()}
</Menu>
) : null;
if (folderTop) {
return (
<>
@@ -32,116 +37,62 @@ function TopView({
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
/>
<header
className="w-full bg-transparent overflow-hidden"
className="w-full overflow-hidden bg-transparent"
role="banner"
aria-label={t("ariaLabels.homePageNavigationHeader")}
>
<nav
className="relative flex items-center justify-between mx-auto h-[50px] sm:h-[62px] md:h-[68px] lg:h-[68px] xl:h-[88px] pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:pl-[var(--spacing-scale-024)] lg:pt-[var(--spacing-scale-016)] lg:pr-[var(--spacing-scale-056)] xl:pl-[var(--spacing-scale-048)] xl:pt-[var(--spacing-scale-024)] xl:pr-[var(--spacing-scale-056)]"
className="relative mx-auto flex h-[50px] items-end justify-between gap-[var(--spacing-scale-008)] pl-[var(--spacing-scale-008)] pr-[var(--spacing-scale-016)] pt-[var(--spacing-scale-010)] sm:h-[62px] sm:px-[var(--spacing-scale-010)] sm:pr-[var(--spacing-scale-020)] sm:pt-[var(--spacing-scale-010)] md:h-[68px] md:px-[var(--spacing-scale-016)] md:pr-[var(--spacing-scale-032)] md:pt-[var(--spacing-scale-016)] lg:h-[68px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-056)] lg:pt-[var(--spacing-scale-016)] xl:h-[88px] xl:pl-[var(--spacing-scale-048)] xl:pr-[var(--spacing-scale-056)] xl:pt-[var(--spacing-scale-024)]"
role="navigation"
aria-label={t("ariaLabels.mainNavigation")}
>
{/* Header Tab - Yellow tab container with decorative Union images */}
<div className="HeaderTab header-breakpoint-transition relative bg-[var(--color-surface-inverse-brand-primary)] rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] sm:rounded-t-[var(--radius-measures-radius-xlarge)] md:rounded-t-[var(--radius-measures-radius-xlarge)] lg:rounded-t-[var(--radius-measures-radius-xlarge)] xl:rounded-t-[var(--radius-measures-radius-xlarge)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-048)] h-[var(--spacing-scale-040)] sm:pl-[var(--spacing-scale-012)] sm:h-[52px] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)] md:gap-[var(--spacing-scale-032)] flex-1 min-w-0 min-w-[197px] sm:min-w-0 sm:mr-[var(--spacing-scale-008)] md:mr-[185px] lg:mr-[var(--spacing-scale-024)] xl:mr-[var(--spacing-scale-032)] flex items-center self-end">
{/* Logo - Consistent left positioning within HeaderTab */}
<Logo
size={logoSize}
wordmark
palette={folderTop ? "inverse" : "default"}
/>
<div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] min-w-0 flex-1 items-center self-end rounded-tl-[var(--radius-measures-radius-medium)] rounded-tr-[var(--radius-measures-radius-medium)] bg-[var(--color-surface-inverse-brand-primary)] pl-[var(--spacing-scale-012)] pr-[var(--spacing-scale-012)] sm:mr-[var(--spacing-scale-008)] sm:h-[52px] sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:h-[64px] xl:rounded-t-[var(--radius-measures-radius-xlarge)] xl:pl-[var(--spacing-scale-032)] xl:pr-[var(--spacing-scale-120)]">
<div className="shrink-0">
<Logo
size={logoSize}
wordmark
palette={folderTop ? "inverse" : "default"}
/>
</div>
{/* XSmall menu — positioned next to logo */}
<div className="block sm:hidden -me-[2px]">
<Menu size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
<div className="ml-auto shrink-0" data-top="nav">
<Menu
size="X Small"
className="md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-012)]"
>
{renderNavigationItems()}
</Menu>
</div>
{/* Decorative Union images for tab appearance */}
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG, not content */}
<img
src={getAssetPath(ASSETS.UNION_XSM)}
alt=""
role="presentation"
className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
className="absolute -bottom-[3px] -right-[52px] -z-10 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]"
/>
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
<img
src={getAssetPath(ASSETS.UNION_SM_MD_LG)}
alt=""
role="presentation"
className="absolute -bottom-[3.7px] -right-[53px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] hidden sm:block xl:hidden -z-10"
className="absolute -bottom-[3.7px] -right-[53px] -z-10 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden"
/>
{/* eslint-disable-next-line @next/next/no-img-element -- decorative SVG */}
<img
src={getAssetPath(ASSETS.UNION_XLG)}
alt=""
role="presentation"
className="absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"
className="absolute -bottom-[6px] -right-[94px] -z-10 hidden h-[53px] w-[105px] xl:block"
/>
</div>
{/* Navigation Links - Centered in header for SM and up */}
<div className="absolute left-1/2 transform -translate-x-1/2 hidden sm:block">
{/* 430-639px (sm: breakpoint): Menu X Small */}
<div className="hidden sm:block md:hidden">
<Menu size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</Menu>
</div>
{/* 640-1023px (md: breakpoint): Menu Small */}
<div className="hidden md:block lg:hidden">
<Menu size="Small">
{renderNavigationItems("homeMd")}
</Menu>
</div>
{/* 1024-1440px (lg: breakpoint): Menu Large */}
<div className="hidden lg:block xl:hidden">
<Menu size="Large">{renderNavigationItems("large")}</Menu>
</div>
{/* 1440px+ (xl: breakpoint): Menu X Large */}
<div className="hidden xl:block">
<Menu size="X Large">
{renderNavigationItems("homeXlarge")}
</Menu>
</div>
</div>
{/* Authentication Elements - Consistent right alignment outside HeaderTab */}
<div className="flex items-center">
{/* XSmall and Small breakpoints - create rule button outside HeaderTab */}
<div className="block md:hidden">
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
{/* Medium breakpoint - login outside HeaderTab, create rule outside */}
<div className="hidden md:block lg:hidden absolute right-[var(--spacing-measures-spacing-016)]">
<div className="flex items-center gap-[var(--spacing-scale-010)]">
{logIn && renderLoginButton("homeMd")}
{renderCreateRuleButton("small", "medium", "medium")}
</div>
</div>
{/* Large breakpoint */}
<div className="hidden lg:flex xl:hidden items-center">
<div className="flex items-center gap-[var(--spacing-scale-004)]">
{logIn && renderLoginButton("large")}
{renderCreateRuleButton("large", "large", "large")}
</div>
</div>
{/* XLarge breakpoint */}
<div className="hidden xl:flex items-center">
<div className="flex items-center gap-[var(--spacing-scale-004)]">
{logIn && renderLoginButton("homeXlarge")}
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
</div>
<div
className="flex shrink-0 items-center gap-[var(--spacing-scale-004)] self-center md:gap-[var(--spacing-scale-010)]"
data-top="auth"
>
{loginControl}
{renderCreateRuleButton()}
</div>
</nav>
</header>
@@ -151,11 +102,10 @@ function TopView({
/**
* Standard marketing / app top nav.
* Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559) — horizontal
* padding, logo ~200px left, menu cluster centered in the bar (`left-1/2` + translate),
* log in + create rule on the right. Breakpoints and Menu sizes unchanged from prior map.
* Figma: "Navigation / Top" (Community-Rule-System, node 22078-808559).
* Three columns so the logo cannot paint over the nav cluster (no absolute
* overlay, no reserved 200px hit box below `lg`).
*/
// Render standard variant (Header style)
return (
<>
<script
@@ -168,19 +118,11 @@ function TopView({
aria-label={t("ariaLabels.mainNavigationHeader")}
>
<nav
className="relative flex w-full items-center
px-[var(--spacing-scale-016)]
py-[var(--spacing-scale-008)]
sm:px-[var(--spacing-measures-spacing-016)]
lg:px-[var(--spacing-measures-spacing-64,64px)]
lg:py-[var(--spacing-scale-016)]"
role="navigation"
aria-label={t("ariaLabels.mainNavigation")}
className="grid w-full grid-cols-[auto_minmax(0,1fr)_auto] items-center px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]"
role="navigation"
aria-label={t("ariaLabels.mainNavigation")}
>
<div
className="relative z-20 min-w-0 shrink-0 sm:w-[200px] sm:max-w-[200px] sm:shrink-0"
data-top="logo"
>
<div className="min-w-0 shrink-0 lg:w-[200px] lg:max-w-[200px]" data-top="logo">
<Logo
size={logoSize}
wordmark
@@ -188,100 +130,24 @@ function TopView({
/>
</div>
{/* XSmall: nav + login in flow (flex-1) — same as before */}
<div
className="flex min-w-0 flex-1 items-center justify-end sm:hidden"
data-top="nav-xs-flow"
className="flex min-w-0 items-center justify-end md:justify-center"
data-top="nav"
>
<div className="block" data-testid="nav-xs">
<Menu size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</Menu>
</div>
<Menu
size="X Small"
className="min-w-0 lg:gap-[var(--spacing-scale-012)]"
>
{renderNavigationItems()}
</Menu>
</div>
{/* sm+ — Figma: nav cluster centered in bar (not between logo and actions) */}
<div
className="pointer-events-none hidden sm:absolute sm:left-1/2 sm:top-1/2 sm:z-10 sm:flex sm:-translate-x-1/2 sm:-translate-y-1/2 sm:items-center sm:justify-center"
data-top="nav-center"
className="flex shrink-0 items-center gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]"
data-top="auth"
>
<div
className="pointer-events-auto hidden sm:flex md:hidden"
data-testid="nav-sm"
>
<Menu size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</Menu>
</div>
<div
className="pointer-events-auto hidden md:flex lg:hidden"
data-testid="nav-md"
>
<Menu size="X Small">
{renderNavigationItems("xsmall")}
</Menu>
</div>
<div
className="pointer-events-auto hidden lg:flex xl:hidden"
data-testid="nav-lg"
>
<Menu size="Large">{renderNavigationItems("large")}</Menu>
</div>
<div
className="pointer-events-auto hidden xl:flex"
data-testid="nav-xl"
>
<Menu size="X Large">
{renderNavigationItems("xlarge")}
</Menu>
</div>
</div>
{/* Authentication Elements - Consistent right alignment across all breakpoints */}
<div className="relative z-20 ml-auto flex shrink-0 items-center">
{/* XSmall breakpoint - Only Create Rule button */}
<div className="block sm:hidden shrink-0" data-testid="auth-xs">
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
{/* Small breakpoint - Only Create Rule button */}
<div className="hidden sm:block md:hidden" data-testid="auth-sm">
<div className="flex items-center gap-[var(--spacing-scale-004)]">
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
</div>
{/* Medium breakpoint */}
<div className="hidden md:block lg:hidden" data-testid="auth-md">
<div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
<Menu size="Small">
{logIn && renderLoginButton("xsmall")}
</Menu>
{renderCreateRuleButton("xsmall", "medium", "medium")}
</div>
</div>
{/* Large breakpoint */}
<div className="hidden lg:block xl:hidden" data-testid="auth-lg">
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
<Menu size="Large">
{logIn && renderLoginButton("large")}
</Menu>
{renderCreateRuleButton("large", "xlarge", "xlarge")}
</div>
</div>
{/* XLarge breakpoint */}
<div className="hidden xl:block" data-testid="auth-xl">
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
<Menu size="X Large">
{logIn && renderLoginButton("xlarge")}
</Menu>
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}
</div>
</div>
{loginControl}
{renderCreateRuleButton()}
</div>
</nav>
</header>
app/components/navigation/Top/index.tsx
+1 -1
View File
@@ -1,3 +1,3 @@
export { default } from "./Top.container";
export type { TopProps, NavSize } from "./Top.types";
export type { TopProps } from "./Top.types";
export { avatarImages } from "./Top.container";
app/globals.css
+23
View File
@@ -58,3 +58,26 @@ body {
background-color: black;
min-height: 100vh;
}
/* Skip link: parked above the viewport until focused. */
.skip-to-content {
position: absolute;
left: var(--spacing-scale-016);
top: var(--spacing-scale-016);
z-index: 100;
padding: var(--spacing-scale-012) var(--spacing-scale-016);
border-radius: var(--radius-measures-radius-full);
background-color: var(--color-surface-inverse-primary);
color: var(--color-content-inverse-primary);
text-decoration: none;
outline: none;
cursor: pointer;
box-shadow:
0 0 0 2px var(--color-border-default-primary),
0 0 0 4px var(--color-border-invert-primary);
transform: translateY(-200%);
}
.skip-to-content:focus,
.skip-to-content:focus-visible {
transform: translateY(0);
}
app/layout.tsx
+3 -4
View File
@@ -6,10 +6,9 @@ import { ASSETS, getAssetPath } from "../lib/assetUtils";
import { PRODUCTION_SITE_ORIGIN } from "../lib/siteMetadata";
import "./globals.css";
// `force-dynamic` is now scoped to `(app)/layout.tsx` and `(admin)/layout.tsx`
// (the only groups that read the session via `ConditionalNavigation`). Marketing
// renders a client-side `MarketingNavigation` so its HTML can be statically
// optimized — TTFB drops to CDN speed for guests.
// Session chrome (`ConditionalNavigation`) lives in `(marketing)`, `(app)`, and
// `(admin)` layouts, behind `<Suspense>`, so the static shell can prerender while
// the header streams with the request cookie.
//
// MessagesProvider + AuthModalProvider are mounted per route group (Phase 4b):
// `(marketing)` gets a trimmed slice without `create.*` (~41 KB gzipped saved