@thorprovider/blocks 1.0.0 → 2.0.0

package/src/blocks/marketing/navbars/navbar.tsx

@@ -0,0 +1,735 @@
+'use client'
+
+import { useEffect, useRef, useState, type ComponentProps, type ComponentType } from 'react'
+import { ArrowRight, Menu } from 'lucide-react'
+
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '../../../ui/accordion'
+import { Button } from '../../../ui/button'
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from '../../../ui/navigation-menu'
+import { Separator } from '../../../ui/separator'
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '../../../ui/sheet'
+import { cn } from '../../../lib/utils'
+import type { CTA } from '../../../lib/types'
+
+/** Structural presentations of the page-level header. */
+export type NavbarPresentation = 'bar' | 'mega' | 'floating'
+
+/** Icon component bound by the host at render time. */
+export type NavbarIcon = ComponentType<{ className?: string }>
+
+/** Maps a serializable icon key to a host-bound icon component. */
+export type NavbarIconMap = Record<string, NavbarIcon>
+
+export interface NavbarItem {
+  label: string
+  href: string
+  description?: string
+  /** Key resolved through the consumer's `iconMap`. Omit for entries without an icon. */
+  icon?: string
+}
+
+export interface NavbarGroup {
+  /** Optional column heading. */
+  title?: string
+  items: NavbarItem[]
+}
+
+export interface NavbarLink {
+  label: string
+  /**
+   * Destination for a plain link. Ignored when `groups` is present, because a grouped
+   * entry opens a flyout instead of navigating.
+   */
+  href?: string
+  /** Grouped entries rendered as a multi-column flyout (and an accordion on mobile). */
+  groups?: NavbarGroup[]
+  /** Renders the link with extra prominence in the flat presentations. */
+  emphasis?: boolean
+}
+
+export interface NavbarFeatured {
+  eyebrow: string
+  title: string
+  description?: string
+  href: string
+  linkLabel?: string
+  image?: string
+  imageAlt?: string
+}
+
+export interface NavbarProps {
+  /** Structural presentation. Omit for the static `bar`. */
+  presentation?: NavbarPresentation
+  /** Brand text shown next to the logo mark. */
+  logoText: string
+  logoHref?: string
+  /** Current location, used to indicate the active entry. */
+  currentPath?: string
+  links: NavbarLink[]
+  /** Promo card shown beside grouped flyout entries. */
+  featured?: NavbarFeatured
+  /** Sign-in action. Rendered as a link when `href` is set, otherwise as a button. */
+  signIn?: CTA
+  /** Primary call to action. Rendered as a link when `href` is set, otherwise as a button. */
+  cta?: CTA
+  /** Host-bound icons for grouped entries that declare an `icon` key. */
+  iconMap?: NavbarIconMap
+  /** Fired when the sign-in action has no `href`. */
+  onSignIn?: () => void
+  /** Fired when the primary call to action has no `href`. */
+  onCtaClick?: () => void
+  /** Classes merged onto the header surface, so a brand can restyle it. */
+  className?: string
+}
+
+const FOCUS_RING =
+  'focus-visible:ring-ring focus-visible:ring-2 focus-visible:outline-none'
+
+function Logo({ text, href }: { text: string; href?: string }) {
+  const className = cn(
+    FOCUS_RING,
+    'flex items-center gap-2 rounded-sm focus-visible:ring-offset-2'
+  )
+
+  const content = (
+    <>
+      <svg viewBox='0 0 32 32' aria-hidden='true' className='text-primary size-7' fill='none' xmlns='http://www.w3.org/2000/svg'>
+        <path
+          d='M26 24.75C26.4142 24.75 26.75 24.4142 26.75 24C26.75 23.5858 26.4142 23.25 26 23.25V24.75ZM26 23.25H11V24.75H26V23.25ZM8.75 21V15H7.25V21H8.75ZM11 23.25C9.75736 23.25 8.75 22.2426 8.75 21H7.25C7.25 23.0711 8.92893 24.75 11 24.75V23.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M1.5 3.25C1.08579 3.25 0.75 3.58579 0.75 4C0.75 4.41421 1.08579 4.75 1.5 4.75V3.25ZM1.5 4.75H6V3.25H1.5V4.75ZM7.25 6V21H8.75V6H7.25ZM6 4.75C6.69036 4.75 7.25 5.30964 7.25 6H8.75C8.75 4.48122 7.51878 3.25 6 3.25V4.75Z'
+          fill='currentColor'
+        />
+        <path
+          d='M22 21.75C22.4142 21.75 22.75 21.4142 22.75 21C22.75 20.5858 22.4142 20.25 22 20.25V21.75ZM22 20.25H11V21.75H22V20.25ZM8.75 18V12H7.25V18H8.75ZM11 20.25C9.75736 20.25 8.75 19.2426 8.75 18H7.25C7.25 20.0711 8.92893 21.75 11 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path
+          d='M27.2057 19.754C27.0654 20.1438 26.6357 20.346 26.246 20.2057C25.8562 20.0654 25.654 19.6357 25.7943 19.246L27.2057 19.754ZM30.0361 9.67744L29.3305 9.4234L29.3305 9.4234L30.0361 9.67744ZM25.7943 19.246L29.3305 9.4234L30.7418 9.93148L27.2057 19.754L25.7943 19.246ZM28.1543 7.75L8 7.75V6.25L28.1543 6.25V7.75ZM29.3305 9.4234C29.6237 8.60882 29.0201 7.75 28.1543 7.75V6.25C30.059 6.25 31.3869 8.13941 30.7418 9.93148L29.3305 9.4234Z'
+          fill='currentColor'
+        />
+        <path
+          d='M13.5 21.75C13.0858 21.75 12.75 21.4142 12.75 21C12.75 20.5858 13.0858 20.25 13.5 20.25V21.75ZM26.7111 19.009L27.4174 19.2613L27.4174 19.2613L26.7111 19.009ZM13.5 20.25H23.8858V21.75H13.5V20.25ZM26.0048 18.7568L27.7937 13.7477L29.2063 14.2523L27.4174 19.2613L26.0048 18.7568ZM23.8858 20.25C24.8367 20.25 25.6849 19.6522 26.0048 18.7568L27.4174 19.2613C26.8843 20.7537 25.4706 21.75 23.8858 21.75V20.25Z'
+          fill='currentColor'
+        />
+        <path d='M21.1694 10.5806L14.5651 17.1849' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <path d='M22.1694 14.5806L18.5632 18.1868' stroke='currentColor' strokeWidth='1.5' strokeLinecap='round' />
+        <circle cx='13.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+        <circle cx='22.1' cy='26.1' r='1.7' stroke='currentColor' strokeWidth='1.2' />
+      </svg>
+      <span className='text-base font-semibold tracking-tight'>{text}</span>
+    </>
+  )
+
+  if (!href) {
+    return <span className={className}>{content}</span>
+  }
+
+  return (
+    <a href={href} className={className}>
+      {content}
+    </a>
+  )
+}
+
+function isCurrent(href: string | undefined, currentPath: string | undefined) {
+  return href !== undefined && href === currentPath
+}
+
+/** Non-color cue so the active entry does not rely on color alone. */
+const CURRENT_CUE = 'font-semibold underline decoration-2 underline-offset-8'
+
+function ActionButton({
+  action,
+  onClick,
+  variant,
+  className,
+  rounded,
+}: {
+  action: CTA
+  onClick?: () => void
+  variant?: ComponentProps<typeof Button>['variant']
+  className?: string
+  rounded?: boolean
+}) {
+  const classes = cn(rounded && 'rounded-full', className)
+
+  if (action.href && !onClick) {
+    return (
+      <Button variant={variant} size='sm' className={classes} asChild>
+        <a href={action.href}>{action.label}</a>
+      </Button>
+    )
+  }
+
+  return (
+    <Button variant={variant} size='sm' className={classes} onClick={onClick}>
+      {action.label}
+    </Button>
+  )
+}
+
+function EntryIcon({ name, iconMap }: { name?: string; iconMap?: NavbarIconMap }) {
+  if (!name) {
+    return null
+  }
+
+  const Icon = iconMap?.[name]
+  if (!Icon) {
+    return null
+  }
+
+  return (
+    <span
+      aria-hidden='true'
+      className='bg-muted text-foreground flex size-8 shrink-0 items-center justify-center rounded-md'
+    >
+      <Icon className='size-4' />
+    </span>
+  )
+}
+
+function FeaturedCard({ featured }: { featured: NavbarFeatured }) {
+  return (
+    <a
+      href={featured.href}
+      className={cn(
+        'border-border group relative flex h-full min-h-56 flex-col justify-end overflow-hidden rounded-md border',
+        FOCUS_RING
+      )}
+    >
+      {featured.image ? (
+        <img
+          src={featured.image}
+          alt={featured.imageAlt ?? ''}
+          className='absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105'
+        />
+      ) : null}
+      {/* Token-driven scrim: follows the consumer theme instead of a hardcoded dark overlay. */}
+      <div
+        aria-hidden='true'
+        className='from-background via-background/70 absolute inset-0 bg-gradient-to-t to-transparent'
+      />
+      <div className='relative z-10 flex flex-col p-4'>
+        <p className='text-muted-foreground text-xs font-semibold tracking-wide uppercase'>
+          {featured.eyebrow}
+        </p>
+        <p className='text-foreground mt-1 text-sm font-medium'>{featured.title}</p>
+        {featured.description ? (
+          <p className='text-muted-foreground mt-1 text-sm'>{featured.description}</p>
+        ) : null}
+        {featured.linkLabel ? (
+          <span className='text-foreground mt-3 inline-flex items-center gap-1 text-sm font-medium'>
+            {featured.linkLabel}
+            <ArrowRight className='size-3.5 transition-transform duration-200 ease-out group-hover:translate-x-0.5' />
+          </span>
+        ) : null}
+      </div>
+    </a>
+  )
+}
+
+function MegaEntry({
+  link,
+  featured,
+  currentPath,
+  iconMap,
+}: {
+  link: NavbarLink
+  featured?: NavbarFeatured
+  currentPath?: string
+  iconMap?: NavbarIconMap
+}) {
+  const groups = link.groups ?? []
+  const hasCurrentChild = groups.some(group =>
+    group.items.some(item => isCurrent(item.href, currentPath))
+  )
+
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuTrigger className={cn(hasCurrentChild && CURRENT_CUE)}>
+        {link.label}
+      </NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <div
+          className={cn(
+            'grid gap-3 p-2',
+            featured
+              ? 'w-[760px] grid-cols-[1fr_248px]'
+              : groups.length > 1
+                ? 'w-[760px] grid-cols-2'
+                : 'w-[360px]'
+          )}
+        >
+          <div className={cn('grid gap-3', groups.length > 1 && 'grid-cols-2')}>
+            {groups.map((group, groupIndex) => (
+              <div key={group.title ?? `group-${groupIndex}`}>
+                {group.title ? (
+                  <p className='text-muted-foreground px-3 pt-1 pb-1 text-xs font-semibold tracking-wide uppercase'>
+                    {group.title}
+                  </p>
+                ) : null}
+                <ul className='grid gap-1'>
+                  {group.items.map(item => {
+                    const active = isCurrent(item.href, currentPath)
+
+                    return (
+                      <li key={item.href}>
+                        <NavigationMenuLink
+                          href={item.href}
+                          aria-current={active ? 'page' : undefined}
+                          className={cn('items-start gap-3 p-3', active && CURRENT_CUE)}
+                        >
+                          <EntryIcon name={item.icon} iconMap={iconMap} />
+                          <span className='flex flex-col gap-0.5'>
+                            <span className='text-sm font-medium'>{item.label}</span>
+                            {item.description ? (
+                              <span className='text-muted-foreground line-clamp-2 text-sm leading-5'>
+                                {item.description}
+                              </span>
+                            ) : null}
+                          </span>
+                        </NavigationMenuLink>
+                      </li>
+                    )
+                  })}
+                </ul>
+              </div>
+            ))}
+          </div>
+          {featured ? <FeaturedCard featured={featured} /> : null}
+        </div>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  )
+}
+
+function MobileMenu({
+  links,
+  currentPath,
+  signIn,
+  cta,
+  onSignIn,
+  onCtaClick,
+}: {
+  links: NavbarLink[]
+  currentPath?: string
+  signIn?: CTA
+  cta?: CTA
+  onSignIn?: () => void
+  onCtaClick?: () => void
+}) {
+  const [open, setOpen] = useState(false)
+  const groupedLinks = links.filter(link => (link.groups?.length ?? 0) > 0)
+  const plainLinks = links.filter(link => (link.groups?.length ?? 0) === 0)
+
+  // Nothing to navigate to and no action to offer: no drawer, no dead trigger.
+  if (links.length === 0 && !signIn && !cta) {
+    return null
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger asChild>
+        <Button variant='ghost' size='icon' aria-label='Open menu' className='lg:hidden'>
+          <Menu />
+        </Button>
+      </SheetTrigger>
+      <SheetContent
+        side='right'
+        className={cn(
+          'w-full max-w-xs p-0',
+          groupedLinks.length > 0 && 'max-w-sm gap-0 overflow-y-auto'
+        )}
+      >
+        <SheetHeader className='border-border border-b'>
+          <SheetTitle className='text-left text-base'>Menu</SheetTitle>
+        </SheetHeader>
+
+        <nav aria-label='Mobile' className='px-2 py-2'>
+          {groupedLinks.length > 0 ? (
+            <Accordion type='multiple'>
+              {groupedLinks.map(link => (
+                <AccordionItem
+                  key={`${link.label}:${link.href ?? 'group'}`}
+                  value={link.label}
+                  className='border-none'
+                >
+                  <AccordionTrigger className='px-3 py-3 text-base font-medium hover:no-underline'>
+                    {link.label}
+                  </AccordionTrigger>
+                  <AccordionContent className='pb-1'>
+                    {(link.groups ?? []).map((group, groupIndex) => (
+                      <div key={group.title ?? `group-${groupIndex}`}>
+                        {group.title ? (
+                          <p className='text-muted-foreground px-3 pt-1 pb-1 text-xs font-semibold tracking-wide uppercase'>
+                            {group.title}
+                          </p>
+                        ) : null}
+                        <ul className='flex flex-col'>
+                          {group.items.map(item => {
+                            const active = isCurrent(item.href, currentPath)
+
+                            return (
+                              <li key={item.href}>
+                                <SheetClose asChild>
+                                  <a
+                                    href={item.href}
+                                    aria-current={active ? 'page' : undefined}
+                                    className={cn(
+                                      'hover:bg-accent hover:text-accent-foreground flex items-start gap-3 rounded-md px-3 py-3 transition-colors duration-150 ease-out',
+                                      FOCUS_RING,
+                                      active ? 'text-foreground' : 'text-muted-foreground',
+                                      active && CURRENT_CUE
+                                    )}
+                                  >
+                                    <EntryIcon name={item.icon} />
+                                    <span className='flex flex-col gap-0.5'>
+                                      <span className='text-sm font-medium'>{item.label}</span>
+                                      {item.description ? (
+                                        <span className='text-muted-foreground text-sm'>
+                                          {item.description}
+                                        </span>
+                                      ) : null}
+                                    </span>
+                                  </a>
+                                </SheetClose>
+                              </li>
+                            )
+                          })}
+                        </ul>
+                      </div>
+                    ))}
+                  </AccordionContent>
+                </AccordionItem>
+              ))}
+            </Accordion>
+          ) : null}
+
+          {plainLinks.length > 0 ? (
+            <div className={cn('flex flex-col', groupedLinks.length > 0 && 'mt-1')}>
+              {plainLinks.map(link => {
+                const active = isCurrent(link.href, currentPath)
+                const className = cn(
+                  'hover:bg-accent hover:text-accent-foreground rounded-md px-3 py-3 text-base font-medium transition-colors duration-150 ease-out',
+                  FOCUS_RING,
+                  active ? 'text-foreground' : 'text-muted-foreground',
+                  active && CURRENT_CUE
+                )
+
+                return (
+                  <SheetClose key={`${link.label}:${link.href ?? 'plain'}`} asChild>
+                    {link.href ? (
+                      <a href={link.href} aria-current={active ? 'page' : undefined} className={className}>
+                        {link.label}
+                      </a>
+                    ) : (
+                      <button type='button' className={className}>
+                        {link.label}
+                      </button>
+                    )}
+                  </SheetClose>
+                )
+              })}
+            </div>
+          ) : null}
+        </nav>
+
+        {signIn || cta ? (
+          <div className='mt-auto flex flex-col gap-4 p-4'>
+            <Separator />
+            <div className='flex flex-col gap-2'>
+              {signIn ? (
+                <SheetClose asChild>
+                  <ActionButton
+                    action={signIn}
+                    onClick={onSignIn}
+                    variant='outline'
+                    className='w-full'
+                  />
+                </SheetClose>
+              ) : null}
+              {cta ? (
+                <SheetClose asChild>
+                  <ActionButton action={cta} onClick={onCtaClick} className='w-full' />
+                </SheetClose>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function FlatLinks({
+  links,
+  currentPath,
+  rounded,
+}: {
+  links: NavbarLink[]
+  currentPath?: string
+  rounded?: boolean
+}) {
+  if (links.length === 0) {
+    return null
+  }
+
+  return (
+    <nav aria-label='Main' className='hidden lg:block'>
+      <ul className='flex items-center gap-1'>
+        {links.map(link => {
+          const active = isCurrent(link.href, currentPath)
+          const className = cn(
+            'hover:text-foreground text-sm font-medium transition-colors duration-150 ease-out',
+            FOCUS_RING,
+            rounded ? 'rounded-full px-3 py-2' : 'rounded-md px-3 py-2',
+            active ? 'text-foreground' : 'text-muted-foreground',
+            active && CURRENT_CUE,
+            !active && link.emphasis && 'text-foreground'
+          )
+
+          return (
+            <li key={`${link.label}:${link.href ?? 'plain'}`}>
+              {link.href ? (
+                <a href={link.href} aria-current={active ? 'page' : undefined} className={className}>
+                  {link.label}
+                </a>
+              ) : (
+                <span className={className}>{link.label}</span>
+              )}
+            </li>
+          )
+        })}
+      </ul>
+    </nav>
+  )
+}
+
+function MegaLinks({
+  links,
+  featured,
+  currentPath,
+  iconMap,
+}: {
+  links: NavbarLink[]
+  featured?: NavbarFeatured
+  currentPath?: string
+  iconMap?: NavbarIconMap
+}) {
+  if (links.length === 0) {
+    return null
+  }
+
+  return (
+    <NavigationMenu className='hidden lg:flex' aria-label='Main'>
+      <NavigationMenuList>
+        {links.map(link => {
+          const grouped = (link.groups?.length ?? 0) > 0
+
+          if (grouped) {
+            return (
+              <MegaEntry
+                key={`${link.label}:group`}
+                link={link}
+                featured={featured}
+                currentPath={currentPath}
+                iconMap={iconMap}
+              />
+            )
+          }
+
+          const active = isCurrent(link.href, currentPath)
+
+          return (
+            <NavigationMenuItem key={`${link.label}:${link.href ?? 'plain'}`}>
+              <NavigationMenuLink
+                href={link.href}
+                aria-current={active ? 'page' : undefined}
+                className={cn(
+                  navigationMenuTriggerStyle(),
+                  active && CURRENT_CUE,
+                  !active && link.emphasis && 'text-foreground font-semibold'
+                )}
+              >
+                {link.label}
+              </NavigationMenuLink>
+            </NavigationMenuItem>
+          )
+        })}
+      </NavigationMenuList>
+    </NavigationMenu>
+  )
+}
+
+/**
+ * Page-level navigation header.
+ *
+ * Responsibilities end at navigation: the header renders no cart, account, or search
+ * affordance — those belong to the commerce shell (`StorefrontNavbar`).
+ *
+ * `floating` keeps the header in normal document flow (`sticky`), so it reserves its own
+ * space and the consumer adds no compensating padding or scroll offset. A `sticky` header
+ * is defeated by an `overflow` ancestor that scrolls; use `bar` there.
+ */
+export function Navbar({
+  presentation = 'bar',
+  logoText,
+  logoHref,
+  currentPath,
+  links,
+  featured,
+  signIn,
+  cta,
+  iconMap,
+  onSignIn,
+  onCtaClick,
+  className,
+}: NavbarProps) {
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  const [scrolled, setScrolled] = useState(false)
+
+  /**
+   * Scroll detection:
+   * - Inside a preview with an overflow ancestor the scroller is not the viewport, so
+   *   `scrollTop` on the nearest scrollable ancestor is the reliable signal.
+   * - On a normal page, an IntersectionObserver on the 8px sentinel gives hysteresis
+   *   without flickering at a hard `scrollY > 8` threshold.
+   */
+  useEffect(() => {
+    if (presentation !== 'floating') {
+      return
+    }
+
+    const sentinel = sentinelRef.current
+    if (!sentinel) {
+      return
+    }
+
+    let ancestor: HTMLElement | null = sentinel.parentElement
+    while (ancestor) {
+      const { overflowY } = getComputedStyle(ancestor)
+      if (
+        (overflowY === 'auto' || overflowY === 'scroll' || overflowY === 'overlay') &&
+        ancestor.scrollHeight > ancestor.clientHeight + 1
+      ) {
+        const scroller = ancestor
+        const update = () => setScrolled(scroller.scrollTop > 8)
+        update()
+        scroller.addEventListener('scroll', update, { passive: true })
+        return () => scroller.removeEventListener('scroll', update)
+      }
+      ancestor = ancestor.parentElement
+    }
+
+    const observer = new IntersectionObserver(([entry]) => setScrolled(!entry.isIntersecting), {
+      threshold: 0,
+    })
+
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [presentation])
+
+  if (presentation === 'floating') {
+    return (
+      <>
+        {/*
+          Out of flow: gives the observer an 8px hysteresis target without painting a
+          blank strip under the transparent unscrolled header.
+        */}
+        <div
+          ref={sentinelRef}
+          aria-hidden='true'
+          className='pointer-events-none absolute inset-x-0 top-0 h-2'
+        />
+
+        <header className={cn('sticky top-0 z-50 w-full', className)}>
+          <div
+            className={cn(
+              'mx-auto flex h-14 items-center justify-between gap-4 transition-all duration-300 ease-out motion-reduce:transition-none',
+              scrolled
+                ? 'border-border/60 bg-background/80 max-w-5xl rounded-full border px-4 shadow-sm backdrop-blur-md sm:px-5'
+                : 'max-w-7xl border border-transparent px-4 sm:px-6 lg:px-8'
+            )}
+          >
+            <Logo text={logoText} href={logoHref} />
+
+            <FlatLinks links={links} currentPath={currentPath} rounded />
+
+            <div className='hidden items-center gap-2 lg:flex'>
+              {signIn ? (
+                <ActionButton action={signIn} onClick={onSignIn} variant='ghost' rounded />
+              ) : null}
+              {cta ? <ActionButton action={cta} onClick={onCtaClick} rounded /> : null}
+            </div>
+
+            <MobileMenu
+              links={links}
+              currentPath={currentPath}
+              signIn={signIn}
+              cta={cta}
+              onSignIn={onSignIn}
+              onCtaClick={onCtaClick}
+            />
+          </div>
+        </header>
+      </>
+    )
+  }
+
+  return (
+    <header className={cn('border-border bg-background w-full border-b', className)}>
+      <div className='mx-auto flex h-16 w-full max-w-7xl items-center justify-between gap-4 px-4 sm:px-6 lg:px-8'>
+        {presentation === 'mega' ? (
+          <div className='flex items-center gap-6'>
+            <Logo text={logoText} href={logoHref} />
+            <MegaLinks
+              links={links}
+              featured={featured}
+              currentPath={currentPath}
+              iconMap={iconMap}
+            />
+          </div>
+        ) : (
+          <>
+            <Logo text={logoText} href={logoHref} />
+            <FlatLinks links={links} currentPath={currentPath} />
+          </>
+        )}
+
+        <div className='hidden items-center gap-2 lg:flex'>
+          {signIn ? <ActionButton action={signIn} onClick={onSignIn} variant='ghost' /> : null}
+          {cta ? <ActionButton action={cta} onClick={onCtaClick} /> : null}
+        </div>
+
+        <MobileMenu
+          links={links}
+          currentPath={currentPath}
+          signIn={signIn}
+          cta={cta}
+          onSignIn={onSignIn}
+          onCtaClick={onCtaClick}
+        />
+      </div>
+    </header>
+  )
+}
+
+export default Navbar