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';67export function Logo({ className }: { className?: string }) {8 return (9 <Link href="/" className={`flex items-center gap-2 ${className ?? ''}`} aria-label="RareIndex home">10 <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>11 <span className="text-[15px] font-semibold tracking-tight text-fg">12 Rare<span className="text-muted">Index</span>13 </span>14 </Link>15 );16}1718export function SiteHeader() {19 return (20 <header className="sticky top-0 z-40 border-b border-border bg-bg/85 backdrop-blur supports-[backdrop-filter]:bg-bg/70">21 <div className="mx-auto flex h-14 max-w-[1440px] items-center gap-3 px-4 sm:px-6">22 <MobileNav items={NAV} groups={NAV_GROUPS} />23 <Logo />24 <nav className="ml-4 hidden items-center gap-1 lg:flex" aria-label="Primary">25 {PRIMARY_NAV.map((n) => (26 <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">27 {n.label}28 </Link>29 ))}30 <details className="group relative">31 <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>32 <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">33 {NAV_GROUPS.map((g) => (34 <div key={g.id}>35 <p className="mb-1.5 text-[10px] font-semibold uppercase tracking-wider text-subtle">{g.label}</p>36 <ul className="space-y-0.5">37 {NAV.filter((n) => n.group === g.id).map((n) => (38 <li key={n.href}>39 <Link href={n.href} className="block rounded-sm px-1.5 py-1 text-[13px] text-muted hover:bg-inset hover:text-fg">40 {n.label}41 </Link>42 </li>43 ))}44 </ul>45 </div>46 ))}47 </div>48 </details>49 </nav>50 <div className="ml-auto flex items-center gap-1.5">51 <HeaderSearch />52 <ThemeToggle />53 <Link href="/account" className="hidden rounded-md border border-border px-2.5 py-1.5 text-[13px] font-medium text-fg hover:bg-inset sm:inline-flex">54 Sign in55 </Link>56 </div>57 </div>58 </header>59 );60}61