{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"aavya-header-center","type":"registry:component","title":"Header — Centered Nav","description":"Three-column header with logo left, NavigationMenu centered, and actions right. This defaults to a full logo mark without text beside it. Used in the brand homepage.","version":"0.1.0","status":"beta","registryDependencies":["button","dropdown-menu","navigation-menu","avatar"],"files":[{"path":"src/components/layout/header-center.tsx","type":"registry:component","content":"'use client'\n\nimport Link from 'next/link'\nimport { usePathname } from 'next/navigation'\nimport {\n  ChevronDown,\n  Code2,\n  ImageIcon,\n  Layers,\n  Menu,\n  Palette,\n  Search,\n} from 'lucide-react'\nimport { Button } from '@/components/ui/button'\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n} from '@/components/ui/navigation-menu'\nimport { Logo } from '@/components/ui/logo'\nimport { ThemeToggle } from '@/components/layout/theme-toggle'\nimport { ProfileDropdown } from '@/components/blocks/profile-dropdown'\nimport { cn } from '@/lib/utils'\n\n// ---------------------------------------------------------------------------\n// Nav data\n// ---------------------------------------------------------------------------\n\nconst navItems = [\n  {\n    label: 'Guidelines',\n    href: '/brand-guidelines',\n    icon: Palette,\n    children: [\n      {\n        label: 'Overview',\n        href: '/brand-guidelines',\n        description: 'Mission, vision, values, and brand principles.',\n      },\n      {\n        label: 'Logo',\n        href: '/brand-guidelines/logo',\n        description: 'Usage rules, clearspace, and approved variations.',\n      },\n      {\n        label: 'Colors',\n        href: '/brand-guidelines/colors',\n        description: 'Primary, secondary, and semantic colour palette.',\n      },\n      {\n        label: 'Typography',\n        href: '/brand-guidelines/typography',\n        description: 'Typefaces, weights, sizes, and usage hierarchy.',\n      },\n    ],\n  },\n  {\n    label: 'Design Tokens',\n    href: '/design-tokens',\n    icon: Layers,\n    children: [\n      {\n        label: 'Colors',\n        href: '/design-tokens/colors',\n        description: 'Full token set for light and dark modes.',\n      },\n      {\n        label: 'Typography',\n        href: '/design-tokens/typography',\n        description: 'Font family, size, weight, and line-height tokens.',\n      },\n      {\n        label: 'Spacing',\n        href: '/design-tokens/spacing',\n        description: 'Scale-based spacing and layout tokens.',\n      },\n      {\n        label: 'Shadows',\n        href: '/design-tokens/shadows',\n        description: 'Elevation and box-shadow tokens.',\n      },\n      {\n        label: 'Border Radius',\n        href: '/design-tokens/border-radius',\n        description: 'Corner radius tokens from sharp to pill.',\n      },\n    ],\n  },\n  {\n    label: 'Assets',\n    href: '/assets',\n    icon: ImageIcon,\n  },\n  {\n    label: 'Registry',\n    href: '/registry',\n    icon: Code2,\n  },\n]\n\n// ---------------------------------------------------------------------------\n// NavListItem\n// ---------------------------------------------------------------------------\n\nfunction NavListItem({\n  href,\n  label,\n  description,\n  active,\n}: {\n  href: string\n  label: string\n  description?: string\n  active?: boolean\n}) {\n  return (\n    <li>\n      <NavigationMenuLink asChild>\n        <Link\n          href={href}\n          className={cn(\n            'block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none',\n            'transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground',\n            active && 'bg-accent/60',\n          )}\n        >\n          <div className=\"text-sm font-medium leading-none\">{label}</div>\n          {description && (\n            <p className=\"line-clamp-2 text-xs leading-snug text-muted-foreground\">\n              {description}\n            </p>\n          )}\n        </Link>\n      </NavigationMenuLink>\n    </li>\n  )\n}\n\n// ---------------------------------------------------------------------------\n// Main export\n// ---------------------------------------------------------------------------\n\nexport function HeaderCenter() {\n  const pathname = usePathname()\n\n  return (\n    <header className=\"sticky top-0 z-40 border-b border-border/80 bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/80\">\n      <div className=\"mx-auto flex h-16 max-w-300 items-center px-5 md:px-7\">\n\n        {/* Left — logo + mobile nav trigger */}\n        <div className=\"flex flex-1 items-center gap-2\">\n          <Link href=\"/\" aria-label=\"Home\">\n            <div className=\"flex items-center\">\n              <Logo />              \n            </div>\n          </Link>\n\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button\n                variant=\"outline\"\n                className=\"h-9 max-w-42.5 justify-start gap-2 rounded-full px-3 lg:hidden\"\n                aria-label=\"Open navigation\"\n              >\n                {(() => {\n                  const active = navItems.find(\n                    (item) => item.href && (pathname === item.href || pathname.startsWith(item.href + '/')),\n                  )\n                  return active ? (\n                    <>\n                      <active.icon className=\"h-4 w-4 shrink-0\" />\n                      <span className=\"truncate text-sm\">{active.label}</span>\n                    </>\n                  ) : (\n                    <>\n                      <Menu className=\"h-4 w-4 shrink-0\" />\n                      <span className=\"truncate text-sm\">Navigation</span>\n                    </>\n                  )\n                })()}\n                <ChevronDown className=\"ml-auto h-3.5 w-3.5 opacity-70\" />\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"start\" className=\"w-56\">\n              <DropdownMenuLabel>Navigate</DropdownMenuLabel>\n              <DropdownMenuSeparator />\n              {navItems.map((item) => {\n                const isActive = item.href\n                  ? pathname === item.href || pathname.startsWith(item.href + '/')\n                  : false\n                return (\n                  <DropdownMenuItem key={item.href} asChild>\n                    <Link href={item.href ?? '#'} className={cn(isActive && 'font-semibold text-foreground')}>\n                      <item.icon className=\"mr-2 h-4 w-4\" />\n                      {item.label}\n                    </Link>\n                  </DropdownMenuItem>\n                )\n              })}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </div>\n\n        {/* Center — NavigationMenu as direct flex child */}\n        <NavigationMenu className=\"hidden lg:flex\">\n          <NavigationMenuList>\n            {navItems.map((item) => {\n              const isActive = item.href\n                ? pathname === item.href || pathname.startsWith(item.href + '/')\n                : false\n\n              return item.children ? (\n                <NavigationMenuItem key={item.label}>\n                  <NavigationMenuTrigger\n                    className={cn(\n                      'bg-transparent text-sm font-medium',\n                      isActive && 'text-foreground',\n                    )}\n                  >\n                    {item.label}\n                  </NavigationMenuTrigger>\n                  <NavigationMenuContent>\n                    <ul className=\"grid w-90 gap-1 p-3 md:w-110 md:grid-cols-2\">\n                      {item.children.map((child) => (\n                        <NavListItem\n                          key={child.label}\n                          href={child.href}\n                          label={child.label}\n                          description={child.description}\n                          active={pathname === child.href}\n                        />\n                      ))}\n                    </ul>\n                  </NavigationMenuContent>\n                </NavigationMenuItem>\n              ) : (\n                <NavigationMenuItem key={item.label}>\n                  <NavigationMenuLink\n                    asChild\n                    className={cn(\n                      navigationMenuTriggerStyle(),\n                      isActive && 'font-semibold text-foreground',\n                    )}\n                  >\n                    <Link href={item.href ?? '#'}>{item.label}</Link>\n                  </NavigationMenuLink>\n                </NavigationMenuItem>\n              )\n            })}\n          </NavigationMenuList>\n        </NavigationMenu>\n\n        {/* Right — actions */}\n        <div className=\"flex flex-1 items-center justify-end gap-0.5 sm:gap-1\">\n          <ThemeToggle />\n          <Button variant=\"ghost\" size=\"icon\" className=\"hidden sm:inline-flex\" asChild>\n            <Link href=\"/search\">\n              <Search className=\"h-4 w-4\" />\n              <span className=\"sr-only\">Search</span>\n            </Link>\n          </Button>\n          <ProfileDropdown loginRedirect={pathname} />\n        </div>\n\n      </div>\n    </header>\n  )\n}\n"}]}