{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "navbar", "title": "Navbar", "author": "AlgorizeTech", "description": "Ask the user to pick one of 7 navbar variants: https://avaraui.com/view/navbar. This item holds 7 of them as looks of one component (default, centered, minimal, glass, floating, spotlight, ecommerce-mega-nav). Skip the question if the user already named one. A responsive marketing navbar with logo, links, mobile menu and GSAP entrance animation. Use it as the top bar of a landing page.", "dependencies": [ "lucide-react" ], "registryDependencies": [ "https://avaraui.com/r/button.json", "utils" ], "files": [ { "path": "src/components/custom/blocks/NavbarBlock.tsx", "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\nimport {\n ArrowRight,\n BadgePercent,\n ChevronDown,\n Command,\n Heart,\n Menu,\n Plus,\n Search,\n ShoppingBag,\n Star,\n Truck,\n User,\n X,\n} from \"lucide-react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport Button from \"./Button\";\nimport { getThemeStyles } from \"./navbar-theme\";\n\nexport type NavbarColor =\n | \"primary\"\n | \"indigo\"\n | \"rose\"\n | \"emerald\"\n | \"zinc\"\n | (string & {});\n\nexport type NavbarVariant =\n | \"default\"\n | \"floating\"\n | \"centered\"\n | \"minimal\"\n | \"glass\"\n | \"spotlight\"\n | \"ecommerce-mega-nav\";\n\nexport interface NavbarProps {\n variant?: NavbarVariant;\n color?: NavbarColor;\n logoText?: string;\n /**\n * The element used for links. Defaults to a plain `a`, so this component works\n * in any React app with no adaptation. In Next.js, pass `next/link` to keep\n * client-side navigation and prefetching: `linkComponent={Link}`.\n */\n linkComponent?: React.ElementType;\n}\n\nconst NAV_LINKS = [\n { name: \"Products\", href: \"#\", hasDropdown: true },\n { name: \"Solutions\", href: \"#\", hasDropdown: false },\n { name: \"Resources\", href: \"#\", hasDropdown: true },\n { name: \"Pricing\", href: \"#\", hasDropdown: false },\n];\n\n// Mobile menu motion. Opening fades the overlay in (0.3s power2.out) and\n// slides the menu in from the right (0.4s power3.out); closing reverses both in\n// 0.3s (power2.in / power3.in). A transition takes its timing from the state it\n// is heading to, so each state carries its own; @starting-style is where the\n// layer starts when it stops being display:none.\nconst POWER3_OUT =\n \"linear(0, .1268, .2412, .3439, .4358, .5177, .5904, .6545, .7108, .7599, .8025, .8391, .8704, .8969, .9191, .9375, .9526, .9647, .9744, .9819, .9877, .9919, .9949, .997, .9984, .9992, .9997, .9999, 1, 1, 1)\";\nconst POWER3_IN =\n \"linear(0, 0, 0, .0001, .0003, .0008, .0016, .003, .0051, .0081, .0123, .0181, .0256, .0353, .0474, .0625, .0809, .1031, .1296, .1609, .1975, .2401, .2892, .3455, .4096, .4823, .5642, .6561, .7588, .8732, 1)\";\n\nconst MOBILE_MENU_CSS = `\n.navbar-mobile-overlay {\n opacity: 0;\n transition: opacity 0.3s cubic-bezier(0.3333, 0, 0.6667, 0);\n}\n.navbar-mobile-overlay[data-open=\"true\"] {\n opacity: 1;\n transition: opacity 0.3s cubic-bezier(0.3333, 1, 0.6667, 1);\n}\n.navbar-mobile-menu {\n transform: translateX(100%);\n transition: transform 0.3s ${POWER3_IN};\n}\n.navbar-mobile-menu[data-open=\"true\"] {\n transform: none;\n transition: transform 0.4s ${POWER3_OUT};\n}\n@starting-style {\n .navbar-mobile-overlay[data-open=\"true\"] { opacity: 0; }\n .navbar-mobile-menu[data-open=\"true\"] { transform: translateX(100%); }\n}\n`;\n\n/**\n * These three are defined at module scope on purpose. Declaring them inside\n * NavbarBlock would make each a new component type on every render, remounting\n * the header and dropping any open dropdown or focus.\n */\nfunction Logo({\n themeBg,\n logoText,\n linkComponent: Link,\n}: {\n themeBg: string;\n logoText: string;\n linkComponent: React.ElementType;\n}) {\n return (\n \n \n {/* No hardcoded colour: theme.bg above already carries the correct\n contrasting foreground for every theme, including a white pick. */}\n \n \n \n {logoText}\n \n \n );\n\n}\n\nfunction DesktopLinks({\n isGlass,\n linkComponent: Link,\n}: {\n isGlass: boolean;\n linkComponent: React.ElementType;\n}) {\n return (\n \n );\n\n}\n\nfunction DesktopActions({\n themeBg,\n linkComponent: Link,\n}: {\n themeBg: string;\n linkComponent: React.ElementType;\n}) {\n return (\n
\n \n Sign In\n \n \n Get Started\n \n
\n );\n}\n\n// ==========================================\n// E-COMMERCE MEGA NAV DATA & COMPONENT\n// ==========================================\ninterface MegaMenuLink {\n name: string;\n href: string;\n}\n\ninterface MegaMenuProduct {\n id: string;\n name: string;\n subtitle: string;\n price: string;\n originalPrice?: string;\n tag?: string;\n rating: number;\n image: string;\n href: string;\n}\n\ninterface MegaMenuPromo {\n tag: string;\n title: string;\n subtitle: string;\n cta: string;\n image: string;\n href: string;\n}\n\ninterface MegaCategory {\n id: string;\n name: string;\n productsTitle: string;\n products: MegaMenuProduct[];\n column1Title: string;\n column1Links: MegaMenuLink[];\n column2Title: string;\n column2Links: MegaMenuLink[];\n promo: MegaMenuPromo;\n}\n\nconst CLD = \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto\";\n\nconst IMG_CHOCOLATE = `${CLD}/v1790509367/flavour-chocolate-1790509374070.webp`;\nconst IMG_COOKIE = `${CLD}/v1790509368/flavour-cookie-1790509374071.webp`;\nconst IMG_BERRY = `${CLD}/v1790509367/flavour-berry-1790509374070.webp`;\nconst IMG_MANGO = `${CLD}/v1790509367/flavour-mango-1790509374071.webp`;\n\nconst ECOM_CATEGORIES: MegaCategory[] = [\n {\n id: \"protein\",\n name: \"Protein\",\n productsTitle: \"Our Protein\",\n products: [\n { id: \"p-1\", name: \"Isoclear Clear Whey\", subtitle: \"Chocolate · 900g\", price: \"$39.90\", tag: \"Bestseller\", rating: 4.9, image: IMG_CHOCOLATE, href: \"#\" },\n { id: \"p-2\", name: \"Designer Whey Protein\", subtitle: \"Cookie · 1kg\", price: \"$34.90\", rating: 4.8, image: IMG_COOKIE, href: \"#\" },\n { id: \"p-3\", name: \"Vegan Protein Blend\", subtitle: \"Mixed berry · 750g\", price: \"$29.90\", originalPrice: \"$36.90\", tag: \"-20%\", rating: 4.7, image: IMG_BERRY, href: \"#\" },\n { id: \"p-4\", name: \"Clear Whey Isolate\", subtitle: \"Mango · 500g\", price: \"$24.90\", tag: \"New\", rating: 4.8, image: IMG_MANGO, href: \"#\" },\n ],\n column1Title: \"Overview\",\n column1Links: [\n { name: \"Whey Protein\", href: \"#\" },\n { name: \"Vegan Protein\", href: \"#\" },\n { name: \"Clear Whey Isolate\", href: \"#\" },\n ],\n column2Title: \"Shop by goal\",\n column2Links: [\n { name: \"Muscle Building\", href: \"#\" },\n { name: \"Weight Management\", href: \"#\" },\n ],\n promo: {\n tag: \"Top rated\",\n title: \"Protein Bestsellers\",\n subtitle: \"Save up to 25% on our highest-rated whey & plant blends.\",\n cta: \"Discover now\",\n image: IMG_CHOCOLATE,\n href: \"#\",\n },\n },\n {\n id: \"bars\",\n name: \"Bars & Snacks\",\n productsTitle: \"Bars & Snacks\",\n products: [\n { id: \"b-1\", name: \"Crunchy Protein Bar\", subtitle: \"Chocolate · 12 pack\", price: \"$27.90\", tag: \"Bestseller\", rating: 4.9, image: IMG_CHOCOLATE, href: \"#\" },\n { id: \"b-2\", name: \"Cookie Dough Bites\", subtitle: \"Cookie · 10 pack\", price: \"$19.90\", rating: 4.7, image: IMG_COOKIE, href: \"#\" },\n { id: \"b-3\", name: \"Berry Protein Crisps\", subtitle: \"Mixed berry · 8 pack\", price: \"$16.90\", tag: \"New\", rating: 4.6, image: IMG_BERRY, href: \"#\" },\n { id: \"b-4\", name: \"Mango Fruit Bar\", subtitle: \"Mango · 12 pack\", price: \"$18.90\", originalPrice: \"$22.90\", tag: \"-15%\", rating: 4.6, image: IMG_MANGO, href: \"#\" },\n ],\n column1Title: \"Overview\",\n column1Links: [\n { name: \"Protein Bars\", href: \"#\" },\n { name: \"Protein Crisps\", href: \"#\" },\n { name: \"Nut Butters\", href: \"#\" },\n ],\n column2Title: \"Shop by need\",\n column2Links: [\n { name: \"On-the-go\", href: \"#\" },\n { name: \"Low Sugar\", href: \"#\" },\n ],\n promo: {\n tag: \"Just landed\",\n title: \"New Flavours\",\n subtitle: \"Freshly baked protein bars & bites with zero added sugar.\",\n cta: \"Taste them all\",\n image: IMG_BERRY,\n href: \"#\",\n },\n },\n {\n id: \"vitamins\",\n name: \"Vitamins & Health\",\n productsTitle: \"Vitamins & Health\",\n products: [\n { id: \"v-1\", name: \"Daily Multivitamin\", subtitle: \"Mixed berry · 60 caps\", price: \"$21.90\", tag: \"Bestseller\", rating: 4.8, image: IMG_BERRY, href: \"#\" },\n { id: \"v-2\", name: \"Omega-3 Softgels\", subtitle: \"Mango · 90 caps\", price: \"$24.90\", rating: 4.7, image: IMG_MANGO, href: \"#\" },\n { id: \"v-3\", name: \"Vitamin D3 + K2\", subtitle: \"Chocolate · 120 caps\", price: \"$17.90\", tag: \"New\", rating: 4.8, image: IMG_CHOCOLATE, href: \"#\" },\n { id: \"v-4\", name: \"Greens Superfood\", subtitle: \"Cookie · 300g\", price: \"$32.90\", originalPrice: \"$39.90\", tag: \"-18%\", rating: 4.6, image: IMG_COOKIE, href: \"#\" },\n ],\n column1Title: \"Overview\",\n column1Links: [\n { name: \"Multivitamins\", href: \"#\" },\n { name: \"Omega-3\", href: \"#\" },\n { name: \"Minerals\", href: \"#\" },\n ],\n column2Title: \"Shop by goal\",\n column2Links: [\n { name: \"Immunity\", href: \"#\" },\n { name: \"Sleep & Recovery\", href: \"#\" },\n ],\n promo: {\n tag: \"Daily routine\",\n title: \"Health Essentials\",\n subtitle: \"Daily micronutrients formulated for immunity & recovery.\",\n cta: \"Discover now\",\n image: IMG_MANGO,\n href: \"#\",\n },\n },\n {\n id: \"creatine\",\n name: \"Creatine\",\n productsTitle: \"Our Creatine\",\n products: [\n { id: \"c-1\", name: \"Creatine Monohydrate\", subtitle: \"Mango · 500g\", price: \"$22.90\", tag: \"Bestseller\", rating: 4.9, image: IMG_MANGO, href: \"#\" },\n { id: \"c-2\", name: \"Creatine Gummies\", subtitle: \"Mixed berry · 90 pcs\", price: \"$26.90\", tag: \"New\", rating: 4.7, image: IMG_BERRY, href: \"#\" },\n { id: \"c-3\", name: \"Pre-Workout Pump\", subtitle: \"Chocolate · 300g\", price: \"$29.90\", rating: 4.6, image: IMG_CHOCOLATE, href: \"#\" },\n { id: \"c-4\", name: \"Creatine Chewables\", subtitle: \"Cookie · 150 tabs\", price: \"$19.90\", originalPrice: \"$24.90\", tag: \"-20%\", rating: 4.7, image: IMG_COOKIE, href: \"#\" },\n ],\n column1Title: \"Overview\",\n column1Links: [\n { name: \"Creatine Powder\", href: \"#\" },\n { name: \"Creatine Gummies\", href: \"#\" },\n { name: \"Pre-Workout\", href: \"#\" },\n ],\n column2Title: \"Shop by goal\",\n column2Links: [\n { name: \"Strength\", href: \"#\" },\n { name: \"Power Output\", href: \"#\" },\n ],\n promo: {\n tag: \"Athlete pick\",\n title: \"Strength Stack\",\n subtitle: \"Ultra-pure micronized creatine for peak strength output.\",\n cta: \"Build your stack\",\n image: IMG_COOKIE,\n href: \"#\",\n },\n },\n];\n\nconst ECOM_STATIC_LINKS = [\"Hydration\", \"Bundles\"];\n\nconst CART_PREVIEW_ITEMS = [\n { name: \"Crunchy Protein Bar\", variant: \"Chocolate · 12 pack\", qty: 1, price: \"$27.90\", image: IMG_CHOCOLATE },\n { name: \"Mango Fruit Bar\", variant: \"Mango · 12 pack\", qty: 2, price: \"$37.80\", image: IMG_MANGO },\n];\n\nconst SEARCH_CATALOG = [\n { title: \"Vitamin D3 + K2\", path: \"/products/vitamin-d3-k2\" },\n { title: \"Omega 3 Softgels\", path: \"/products/omega-3-softgels\" },\n { title: \"Isoclear Clear Whey\", path: \"/products/isoclear-clear-whey\" },\n { title: \"Designer Whey Protein\", path: \"/products/designer-whey-protein\" },\n { title: \"Crunchy Protein Bar\", path: \"/products/crunchy-protein-bar\" },\n { title: \"Cookie Dough Bites\", path: \"/products/cookie-dough-bites\" },\n { title: \"Berry Protein Crisps\", path: \"/products/berry-protein-crisps\" },\n { title: \"Mango Fruit Bar\", path: \"/products/mango-fruit-bar\" },\n { title: \"Creatine Monohydrate\", path: \"/products/creatine-monohydrate\" },\n];\n\n// The panel is mounted once and never unmounted while you move between\n// categories — only its content swaps (with a short cross-fade). Opening\n// eases the height in via grid-template-rows 0fr → 1fr.\nconst MEGA_NAV_CSS = `\n@keyframes mega-nav-content-in {\n from { opacity: 0; transform: translateY(6px); }\n to { opacity: 1; transform: none; }\n}\n.mega-nav-content { animation: mega-nav-content-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }\n@keyframes mega-nav-drawer-in {\n from { transform: translateX(-100%); }\n to { transform: none; }\n}\n.mega-nav-drawer { animation: mega-nav-drawer-in 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; }\n@keyframes mega-nav-fade-in { from { opacity: 0; } to { opacity: 1; } }\n.mega-nav-overlay { animation: mega-nav-fade-in 0.3s ease-out both; }\n@media (prefers-reduced-motion: reduce) {\n .mega-nav-content, .mega-nav-drawer, .mega-nav-overlay { animation: none; }\n}\n`;\n\nfunction StarRating({ value }: { value: number }) {\n return (\n \n \n {value.toFixed(1)}\n \n );\n}\n\nfunction EcommerceMegaNav({\n color = \"primary\",\n logoText = \"NUTRIFY\",\n linkComponent: Link = \"a\",\n}: {\n color?: NavbarColor;\n logoText?: string;\n linkComponent?: React.ElementType;\n}) {\n const { theme, style } = getThemeStyles(color);\n const [activeMenuId, setActiveMenuId] = useState(null);\n // Remembers the last category so the panel keeps its content while it\n // eases closed instead of going blank mid-animation.\n const [lastMenuId, setLastMenuId] = useState(ECOM_CATEGORIES[0].id);\n const [mobileOpen, setMobileOpen] = useState(false);\n const [expandedMobileCategory, setExpandedMobileCategory] = useState(ECOM_CATEGORIES[0].id);\n const [cartOpen, setCartOpen] = useState(false);\n const [searchOpen, setSearchOpen] = useState(false);\n const [searchQuery, setSearchQuery] = useState(\"\");\n const closeTimeoutRef = useRef | null>(null);\n\n const filteredSearchItems = (() => {\n const q = searchQuery.trim().toLowerCase();\n if (!q) return SEARCH_CATALOG.slice(0, 4);\n const matches = SEARCH_CATALOG.filter(\n (item) => item.title.toLowerCase().includes(q) || item.path.toLowerCase().includes(q),\n );\n return matches.length > 0 ? matches : SEARCH_CATALOG.slice(0, 2);\n })();\n\n const isOpen = activeMenuId !== null;\n const shownCategory =\n ECOM_CATEGORIES.find((c) => c.id === (activeMenuId ?? lastMenuId)) ?? ECOM_CATEGORIES[0];\n\n const cancelClose = () => {\n if (closeTimeoutRef.current) {\n clearTimeout(closeTimeoutRef.current);\n closeTimeoutRef.current = null;\n }\n };\n\n const openMenu = (id: string) => {\n cancelClose();\n setActiveMenuId(id);\n setLastMenuId(id);\n };\n\n const scheduleClose = () => {\n cancelClose();\n closeTimeoutRef.current = setTimeout(() => setActiveMenuId(null), 200);\n };\n\n useEffect(() => () => cancelClose(), []);\n\n useEffect(() => {\n if (!isOpen && !searchOpen) return;\n const onKey = (e: KeyboardEvent) => {\n if (e.key === \"Escape\") {\n setActiveMenuId(null);\n setSearchOpen(false);\n }\n };\n window.addEventListener(\"keydown\", onKey);\n return () => window.removeEventListener(\"keydown\", onKey);\n }, [isOpen, searchOpen]);\n\n return (\n
\n \n\n {/* ── Announcement bar ── */}\n
\n \n Free delivery from $80\n
\n\n {/* ── Row 1: logo · search · actions ── */}\n
\n
\n
\n setMobileOpen(true)}\n className=\"lg:hidden p-2 -ml-2 rounded-full text-foreground hover:bg-muted transition-colors\"\n >\n \n \n \n \n {logoText}\n \n \n
\n\n
\n {\n setActiveMenuId(null);\n setSearchOpen(true);\n }}\n className=\"relative w-full h-10 pl-11 pr-4 text-left text-sm rounded-full bg-[color-mix(in_oklab,var(--navbar-accent)_6%,var(--muted))] border border-[color-mix(in_oklab,var(--navbar-accent)_18%,transparent)] hover:border-[color-mix(in_oklab,var(--navbar-accent)_40%,transparent)] transition-colors flex items-center text-muted-foreground cursor-text\"\n >\n \n {searchQuery || \"Search for protein, creatine, ...\"}\n \n
\n\n
\n {\n setActiveMenuId(null);\n setSearchOpen(true);\n }}\n className=\"lg:hidden p-2 rounded-full text-foreground hover:bg-muted transition-colors\"\n >\n \n \n \n \n
\n setCartOpen((v) => !v)}\n aria-label=\"Cart (3 items)\"\n className=\"relative p-2 rounded-full text-foreground hover:bg-muted transition-colors\"\n >\n \n \n 3\n \n \n\n {cartOpen && (\n <>\n
setCartOpen(false)} />\n
\n
\n Your cart (3)\n \n
\n {CART_PREVIEW_ITEMS.map((item) => (\n
\n
\n {item.name}\n
\n
\n

{item.name}

\n

{item.variant} · Qty {item.qty}

\n
\n {item.price}\n
\n ))}\n
\n Subtotal\n $85.70\n
\n setCartOpen(false)}\n className={cn(\"w-full py-3 text-center text-sm font-semibold rounded-full transition-opacity\", theme.bg)}\n >\n Checkout\n \n
\n \n )}\n
\n
\n
\n
\n\n {/* ── Row 2: category links + persistent mega panel (desktop) ── */}\n
\n )}\n
\n );\n}\n\nfunction StandardNavbar({\n variant = \"default\",\n color = \"primary\",\n logoText = \"Nexus\",\n linkComponent: Link = \"a\",\n}: NavbarProps) {\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n // Keeps the layer mounted for the 0.4s slide-out after closing.\n const [closing, setClosing] = useState(false);\n const { theme, style } = getThemeStyles(color);\n\n const isGlass = variant === \"glass\";\n\n // Visibility is derived, not synced: the layer shows whenever the menu is\n // open, and `closing` only extends that through the exit animation. It used\n // to be a separate `renderLayer` flag set during render when `mobileMenuOpen`\n // flipped — under StrictMode that update was dropped a frame after commit,\n // so the layer went back to display:none and a tap looked like it did nothing.\n const showLayer = mobileMenuOpen || closing;\n\n const closeMenu = () => {\n setMobileMenuOpen(false);\n setClosing(true);\n };\n\n useEffect(() => {\n if (!closing) return;\n const t = setTimeout(() => setClosing(false), 400);\n return () => clearTimeout(t);\n }, [closing]);\n\n const getContainerStyles = () => {\n switch (variant) {\n case \"floating\":\n return \"max-w-5xl mx-auto top-6 rounded-full bg-background/80 backdrop-blur-lg border border-border shadow-lg px-6\";\n case \"glass\":\n return \"w-full bg-background/40 backdrop-blur-xl border-b border-foreground/10 shadow-sm px-6 lg:px-12\";\n case \"minimal\":\n return \"w-full bg-transparent px-6 lg:px-12 pt-6\";\n case \"centered\":\n case \"default\":\n default:\n return \"w-full bg-background border-b border-border px-6 lg:px-12\";\n }\n };\n\n return (\n
\n \n \n {variant === \"centered\" ? (\n // Not grid-cols-3: equal thirds give the links only a third of the\n // width, which the four of them overflow long before the viewport\n // runs out. Letting the logo size to its content and splitting the\n // remainder keeps it centred while giving the links real room.\n
\n
\n \n
\n
\n \n
\n
\n \n }\n className=\"lg:hidden shadow-none\"\n onClick={() => setMobileMenuOpen(true)}\n />\n
\n
\n ) : (\n
\n
\n \n \n
\n
\n \n }\n className=\"lg:hidden -mr-2 text-muted-foreground shadow-none\"\n onClick={() => setMobileMenuOpen(true)}\n />\n
\n
\n )}\n \n \n \n \n \n \n }\n onClick={closeMenu}\n className={cn(\n \"-mr-2 rounded-full text-muted-foreground shadow-none hover:text-foreground\",\n isGlass\n ? \"hover:bg-foreground/5\"\n : \"bg-muted\",\n )}\n />\n
\n
\n {NAV_LINKS.map((link) => (\n
\n \n {link.name}{\" \"}\n {link.hasDropdown && (\n \n )}\n \n {link.hasDropdown && (\n \n {[\"Overview\", \"Features\", \"Integrations\"].map((sub) => (\n \n {sub}\n \n ))}\n
\n )}\n
\n ))}\n \n \n \n Sign In\n \n \n Get Started\n \n \n \n \n \n );\n}\n\nfunction SpotlightRollupButton({\n themeBg,\n label = \"Get Started\",\n href = \"#\",\n className,\n onClick,\n linkComponent: Link,\n}: {\n themeBg: string;\n label?: string;\n href?: string;\n className?: string;\n onClick?: () => void;\n linkComponent: React.ElementType;\n}) {\n return (\n \n \n \n \n {label}\n \n \n {label}\n \n \n \n );\n}\n\nfunction SpotlightNavbar({\n color = \"primary\",\n logoText = \"Nexus\",\n linkComponent: Link = \"a\",\n}: {\n color?: NavbarColor;\n logoText?: string;\n linkComponent?: React.ElementType;\n}) {\n const { theme, style } = getThemeStyles(color);\n const [scrolled, setScrolled] = useState(false);\n const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n const navRef = useRef(null);\n const linksContainerRef = useRef(null);\n const [pillRect, setPillRect] = useState<{\n x: number;\n y: number;\n width: number;\n height: number;\n visible: boolean;\n }>({ x: 0, y: 0, width: 0, height: 0, visible: false });\n\n useEffect(() => {\n const handleScroll = (e?: Event) => {\n const target = e?.target;\n if (\n target instanceof HTMLElement &&\n navRef.current &&\n target.contains(navRef.current)\n ) {\n setScrolled(target.scrollTop > 40);\n return;\n }\n setScrolled(window.scrollY > 40);\n };\n window.addEventListener(\"scroll\", handleScroll, {\n capture: true,\n passive: true,\n });\n handleScroll();\n return () =>\n window.removeEventListener(\"scroll\", handleScroll, { capture: true });\n }, []);\n\n const handleLinkEnter = (e: React.MouseEvent) => {\n const container = linksContainerRef.current;\n if (!container) return;\n const itemRect = e.currentTarget.getBoundingClientRect();\n const containerRect = container.getBoundingClientRect();\n setPillRect({\n x: itemRect.left - containerRect.left,\n y: itemRect.top - containerRect.top,\n width: itemRect.width,\n height: itemRect.height,\n visible: true,\n });\n };\n\n const handleContainerLeave = () => {\n setPillRect((prev) => ({ ...prev, visible: false }));\n };\n\n return (\n \n \n {/* Left: Our Logo (shrinks smoothly on scroll) */}\n
\n \n \n \n
\n \n {logoText}\n \n \n \n\n {/* Center: Desktop Nav Links with Sliding Hover Pill */}\n