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

Update TopNav component

Browse Source
This commit is contained in:
adilallo
2026-02-06 14:25:27 -07:00
parent d5c7262794
commit 162fdf94db
13 changed files with 383 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/navigation/TopNav/TopNav.container.tsx
+47 -49
View File
@@ -99,54 +99,38 @@ const TopNavContainer = memo<TopNavProps>(
];
const renderNavigationItems = (size: NavSize) => {
return navigationItems.map((item, index) => {
// Determine size based on folderTop and item properties
let itemSize: NavSize = size;
if (item.extraPadding) {
if (folderTop) {
if (
size === "xsmall" ||
size === "default" ||
size === "home" ||
size === "homeMd" ||
size === "large" ||
size === "homeXlarge"
) {
itemSize =
size === "home" || size === "homeMd"
? "homeMd"
: size === "large"
? "large"
: size === "homeXlarge"
? "homeXlarge"
: "xsmallUseCases";
}
} else {
if (size === "xsmall") {
itemSize = "xsmallUseCases";
}
}
}
// Map NavSize to Figma MenuBarItem sizes
const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
default: "Small",
xsmall: "X Small",
xsmallUseCases: "X Small",
home: "X Small",
homeMd: "Medium",
homeUseCases: "Small",
large: "Large",
largeUseCases: "Large",
homeXlarge: "X Large",
xlarge: "X Large",
};
// Determine variant based on folderTop
const variant = folderTop
? size === "xsmall" ||
size === "default" ||
size === "home" ||
size === "homeMd" ||
size === "large" ||
size === "homeXlarge"
? "home"
: "default"
: "default";
// Determine mode based on folderTop
const mode = folderTop ? "inverse" : "default";
return navigationItems.map((item, index) => {
// Map size to Figma size
let itemSize = sizeMap[size] || "Small";
// Pass reducedPadding for "use cases" button (item with extraPadding: true)
const isUseCases = item.extraPadding === true;
return (
<MenuBarItem
key={index}
href={item.href}
size={itemSize}
variant={variant}
isActive={pathname === item.href}
mode={mode}
state={pathname === item.href ? "selected" : "default"}
reducedPadding={isUseCases}
ariaLabel={t("ariaLabels.navigateToPage").replace("{text}", item.text)}
>
{item.text}
@@ -174,18 +158,32 @@ const TopNavContainer = memo<TopNavProps>(
};
const renderLoginButton = (size: NavSize) => {
// Determine variant based on folderTop
const variant = folderTop
? size === "xsmall" || size === "default"
? "home"
: "default"
: "default";
// Map NavSize to Figma MenuBarItem sizes
const sizeMap: Record<NavSize, "X Small" | "Small" | "Medium" | "Large" | "X Large"> = {
default: "Small",
xsmall: "X Small",
xsmallUseCases: "X Small",
home: "X Small",
homeMd: "Medium",
homeUseCases: "Small",
large: "Large",
largeUseCases: "Large",
homeXlarge: "X Large",
xlarge: "X Large",
};
// 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" || size === "home";
const mode = folderTop && isSmallBreakpoint ? "inverse" : "default";
return (
<MenuBarItem
href="#"
size={size}
variant={variant}
size={sizeMap[size] || "Small"}
mode={mode}
ariaLabel={t("ariaLabels.logInToAccount")}
>
{t("buttons.logIn")}
app/components/navigation/TopNav/TopNav.view.tsx
+57 -34
View File
@@ -3,7 +3,7 @@
import { memo } from "react";
import Script from "next/script";
import { useTranslation } from "../../../contexts/MessagesContext";
import HeaderTab from "../HeaderTab";
import { getAssetPath } from "../../../../lib/assetUtils";
import MenuBar from "../MenuBar";
import type { TopNavViewProps } from "./TopNav.types";
@@ -36,11 +36,12 @@ function TopNavView({
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] px-[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 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)]"
role="navigation"
aria-label={t("ariaLabels.mainNavigation")}
>
<HeaderTab className="flex items-center self-end" stretch={true}>
{/* 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 */}
<div>
{logoConfig.map((config, index) => (
@@ -52,32 +53,56 @@ function TopNavView({
{/* XSmall menu bar - positioned next to logo */}
<div className="block sm:hidden -me-[2px]">
<MenuBar size="default">
<MenuBar size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</MenuBar>
</div>
</HeaderTab>
{/* Decorative Union images for tab appearance */}
<img
src={getAssetPath("assets/Union_xsm.svg")}
alt=""
role="presentation"
className="absolute -bottom-[3px] -right-[52px] w-[61px] h-[24px] sm:w-[61px] sm:h-[31.5px] sm:hidden -z-10"
/>
<img
src={getAssetPath("assets/Union_sm_md_lg.svg")}
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"
/>
<img
src={getAssetPath("assets/Union_xlg.svg")}
alt=""
role="presentation"
className="absolute -bottom-[6px] -right-[94px] w-[105px] h-[53px] hidden xl:block -z-10"
/>
</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): MenuBar X Small */}
<div className="hidden sm:block md:hidden">
<MenuBar size="default">
<MenuBar size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</MenuBar>
</div>
{/* 640-1023px (md: breakpoint): MenuBar Small */}
<div className="hidden md:block lg:hidden">
<MenuBar size="medium">{renderNavigationItems("homeMd")}</MenuBar>
<MenuBar size="Small">{renderNavigationItems("homeMd")}</MenuBar>
</div>
{/* 1024-1440px (lg: breakpoint): MenuBar Large */}
<div className="hidden lg:block xl:hidden">
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
<MenuBar size="Large">{renderNavigationItems("large")}</MenuBar>
</div>
{/* 1440px+ (xl: breakpoint): MenuBar X Large */}
<div className="hidden xl:block">
<MenuBar size="large">
<MenuBar size="X Large">
{renderNavigationItems("homeXlarge")}
</MenuBar>
</div>
@@ -133,7 +158,7 @@ function TopNavView({
aria-label={t("ariaLabels.mainNavigationHeader")}
>
<nav
className="flex items-center justify-between mx-auto h-[40px] lg:h-[84px] xl:h-[88px] px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)]"
className="flex items-center gap-[var(--spacing-scale-002)] sm:justify-between mx-auto h-[var(--spacing-scale-040)] lg:h-[84px] xl:h-[88px] px-[var(--spacing-scale-016)] py-[var(--spacing-scale-008)] sm:px-[var(--spacing-measures-spacing-016)] sm:py-[var(--spacing-measures-spacing-008)] lg:px-[var(--spacing-measures-spacing-64,64px)] lg:py-[var(--spacing-measures-spacing-016,16px)] sm:gap-0"
role="navigation"
aria-label={t("ariaLabels.mainNavigation")}
>
@@ -151,46 +176,44 @@ function TopNavView({
</div>
{/* Navigation Links - Consistent center positioning */}
<div className="flex items-center">
{/* XSmall breakpoint - Navigation items moved to right section */}
<div className="flex items-center flex-1 justify-end sm:flex-none sm:justify-center">
{/* XSmall breakpoint - Navigation items in Actions section (flex-1, justify-end) */}
<div className="block sm:hidden" data-testid="nav-xs">
{/* Empty for XSmall - navigation moved to right */}
</div>
{/* Small breakpoint - All items grouped together, centered */}
<div className="hidden sm:block md:hidden" data-testid="nav-sm">
<MenuBar size="default">
<MenuBar size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</MenuBar>
</div>
{/* 430-639px (sm: breakpoint): MenuBar X Small */}
<div className="hidden sm:block md:hidden" data-testid="nav-sm">
<MenuBar size="X Small">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</MenuBar>
</div>
{/* 640-1023px (md: breakpoint): MenuBar X Small (different from folderTop=true) */}
<div className="hidden md:block lg:hidden" data-testid="nav-md">
<MenuBar size="default">
<MenuBar size="X Small">
{renderNavigationItems("xsmall")}
</MenuBar>
</div>
<div className="hidden lg:block xl:hidden" data-testid="nav-lg">
<MenuBar size="large">{renderNavigationItems("large")}</MenuBar>
<MenuBar size="Large">{renderNavigationItems("large")}</MenuBar>
</div>
<div className="hidden xl:block" data-testid="nav-xl">
<MenuBar size="large">{renderNavigationItems("xlarge")}</MenuBar>
<MenuBar size="X Large">{renderNavigationItems("xlarge")}</MenuBar>
</div>
</div>
{/* Authentication Elements - Consistent right alignment across all breakpoints */}
<div className="flex items-center">
{/* XSmall breakpoint - All navigation items + Create Rule button */}
<div className="block sm:hidden" data-testid="auth-xs">
<div className="flex items-center gap-[var(--spacing-scale-001)]">
<MenuBar size="default">
{renderNavigationItems("xsmall")}
{logIn && renderLoginButton("xsmall")}
</MenuBar>
{renderCreateRuleButton("xsmall", "small", "small")}
</div>
<div className="flex items-center shrink-0">
{/* 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 */}
@@ -203,7 +226,7 @@ function TopNavView({
{/* Medium breakpoint */}
<div className="hidden md:block lg:hidden" data-testid="auth-md">
<div className="flex items-center gap-[var(--spacing-measures-spacing-010)]">
<MenuBar size="default">
<MenuBar size="Small">
{logIn && renderLoginButton("xsmall")}
</MenuBar>
{renderCreateRuleButton("xsmall", "medium", "medium")}
@@ -213,7 +236,7 @@ function TopNavView({
{/* Large breakpoint */}
<div className="hidden lg:block xl:hidden" data-testid="auth-lg">
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
<MenuBar size="large">
<MenuBar size="Large">
{logIn && renderLoginButton("large")}
</MenuBar>
{renderCreateRuleButton("large", "xlarge", "xlarge")}
@@ -223,7 +246,7 @@ function TopNavView({
{/* XLarge breakpoint */}
<div className="hidden xl:block" data-testid="auth-xl">
<div className="flex items-center gap-[var(--spacing-measures-spacing-004)]">
<MenuBar size="large">
<MenuBar size="X Large">
{logIn && renderLoginButton("xlarge")}
</MenuBar>
{renderCreateRuleButton("xlarge", "xlarge", "xlarge")}