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

Restore the folder header to Figma layout without cloning the nav, and page-center inner-page links with the home cluster.

Browse Source 
Park the skip link in the Tailwind sheet so it cannot sit in document flow and push the yellow tab down.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
adilallo
2026-09-09 21:39:39 -06:00
co-authored by Cursor
parent b42716c262
commit 4bd9fa6dc6
7 changed files with 110 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/navigation/Top/Top.view.tsx
+18 -13
View File
@@ -37,17 +37,17 @@ function TopView({
dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
/>
<header
className="w-full overflow-hidden bg-transparent"
className="w-full overflow-visible bg-transparent"
role="banner"
aria-label={t("ariaLabels.homePageNavigationHeader")}
>
<nav
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)]"
className="relative mx-auto flex h-[50px] items-end justify-between 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")}
>
<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">
<div className="HeaderTab header-breakpoint-transition relative flex h-[var(--spacing-scale-040)] w-fit min-w-0 items-center self-end overflow-visible 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:w-auto sm:flex-1 sm:rounded-t-[var(--radius-measures-radius-xlarge)] sm:pr-[var(--spacing-scale-006)] md:h-[52px] md:min-w-0 md:rounded-t-[var(--radius-measures-radius-xlarge)] md:pl-[var(--spacing-scale-024)] md:pr-[var(--spacing-scale-012)] lg:mr-[var(--spacing-scale-024)] lg:h-[52px] lg:rounded-t-[var(--radius-measures-radius-xlarge)] lg:pl-[var(--spacing-scale-024)] lg:pr-[var(--spacing-scale-048)] xl:mr-[var(--spacing-scale-032)] 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="relative z-[1] shrink-0">
<Logo
size={logoSize}
wordmark
@@ -55,7 +55,10 @@ function TopView({
/>
</div>
<div className="ml-auto shrink-0" data-top="nav">
<div
className="relative z-[1] shrink-0 md:absolute md:top-1/2 md:left-[calc(50vw-var(--spacing-scale-016))] md:-translate-x-1/2 md:-translate-y-1/2 lg:left-[calc(50vw-var(--spacing-scale-024))] xl:left-[calc(50vw-var(--spacing-scale-048))]"
data-top="nav"
>
<Menu
size="X Small"
className="md:gap-[var(--spacing-scale-004)] lg:gap-[var(--spacing-scale-012)]"
@@ -69,21 +72,21 @@ function TopView({
src={getAssetPath(ASSETS.UNION_XSM)}
alt=""
role="presentation"
className="absolute -bottom-[3px] -right-[52px] -z-10 h-[24px] w-[61px] sm:hidden sm:h-[31.5px] sm:w-[61px]"
className="pointer-events-none absolute -bottom-[3px] -right-[52px] z-0 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] -z-10 hidden h-[24px] w-[61px] sm:block sm:h-[31.5px] sm:w-[61px] xl:hidden"
className="pointer-events-none absolute -bottom-[3.7px] -right-[53px] z-0 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] -z-10 hidden h-[53px] w-[105px] xl:block"
className="pointer-events-none absolute -bottom-[6px] -right-[94px] z-0 hidden h-[53px] w-[105px] xl:block"
/>
</div>
@@ -103,8 +106,10 @@ function TopView({
/**
* Standard marketing / app top nav.
* 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`).
* Below md: auto | 1fr | auto so the logo cannot paint over the cluster.
* From md: 1fr | auto | 1fr so the cluster sits on the same page midline
* as Folder-top (Create rule is wider than the logo, so a leftover-column
* center sits off-center).
*/
return (
<>
@@ -118,11 +123,11 @@ function TopView({
aria-label={t("ariaLabels.mainNavigationHeader")}
>
<nav
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)]"
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)] md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-scale-016)]"
role="navigation"
aria-label={t("ariaLabels.mainNavigation")}
>
<div className="min-w-0 shrink-0 lg:w-[200px] lg:max-w-[200px]" data-top="logo">
<div className="min-w-0 shrink-0 justify-self-start lg:w-[200px] lg:max-w-[200px]" data-top="logo">
<Logo
size={logoSize}
wordmark
@@ -143,7 +148,7 @@ function TopView({
</div>
<div
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)]"
className="flex shrink-0 items-center justify-self-end gap-[var(--spacing-scale-004)] md:gap-[var(--spacing-measures-spacing-010)] lg:gap-[var(--spacing-measures-spacing-004)]"
data-top="auth"
>
{loginControl}