1import Link from 'next/link';2import { NAV, NAV_GROUPS, PRIMARY_NAV } from '@/config/nav';3import { ThemeToggle } from './theme-toggle';4import { MobileNav } from './mobile-nav';5import { HeaderSearch } from './header-search';6import { UserMenu } from '@/components/account/user-menu';78export function Logo({ className }: { className?: string }) {9 return (10 <Link href="/" className={`flex items-center gap-2 ${className ?? ''}`} aria-label="RareIndex home">11 <span className="inline-flex h-6 w-6 items-center justify-center rounded-sm bg-accent text-[11px] font-bold text-accent-fg">R</span>12 <span className="text-[15px] font-semibold tracking-tight text-fg">13 Rare<span className="text-muted">Index</span>14 </span>15 </Link>16 );17}1819export function SiteHeader() {20 return (21 <header className="sticky top-0 z-40 border-b border-border bg-bg/85 backdrop-blur supports-[backdrop-filter]:bg-bg/70">22 <div className="mx-auto flex h-14 max-w-[1440px] items-center gap-3 px-4 sm:px-6">23 <MobileNav items={NAV} groups={NAV_GROUPS} />24 <Logo />25 <nav className="ml-4 hidden items-center gap-1 lg:flex" aria-label="Primary">26 {PRIMARY_NAV.map((n) => (27 <Link key={n.href} href={n.href} className="rounded-md px-2.5 py-1.5 text-[13px] font-medium text-muted hover:bg-inset hover:text-fg">28 {n.label}29 </Link>30 ))}31 <details className="group relative">32 <summary className="cursor-pointer list-none rounded-md px-2.5 py-1.5 text-[13px] font-medium text-muted hover:bg-inset hover:text-fg [&::-webkit-details-marker]:hidden">More</summary>33 <div className="absolute left-0 top-full z-50 mt-1 grid w-[640px] grid-cols-3 gap-4 rounded-lg border border-border bg-elevated p-4 shadow-pop">34 {NAV_GROUPS.map((g) => (35 <div key={g.id}>36 <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-subtle">{g.label}</p>37 <ul className="space-y-0.5">38 {NAV.filter((n) => n.group === g.id).map((n) => (39 <li key={n.href}>40 <Link href={n.href} className="block rounded-sm px-1.5 py-1 text-[13px] text-muted hover:bg-inset hover:text-fg">41 {n.label}42 </Link>43 </li>44 ))}45 </ul>46 </div>47 ))}48 </div>49 </details>50 </nav>51 <div className="ml-auto flex items-center gap-1.5">52 <HeaderSearch />53 <ThemeToggle />54 <UserMenu />55 </div>56 </div>57 </header>58 );59}60