spb/rareindex

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';7import { LogoMark } from './logo';89export function Logo({ className, compact = false }: { className?: string; compact?: boolean }) {10  return (11    <Link href="/" className={`flex items-center gap-2 ${className ?? ''}`} aria-label="RareIndex home">12      <LogoMark className="h-6 w-6" />13      {!compact ? (14        <span className="text-[15px] font-semibold tracking-tight text-fg">15          Rare<span className="text-[#C9963F]">Index</span>16        </span>17      ) : null}18    </Link>19  );20}2122export function SiteHeader() {23  return (24    <header className="sticky top-0 z-40 border-b border-border bg-bg/85 backdrop-blur-md supports-[backdrop-filter]:bg-bg/70" style={{ paddingTop: 'env(safe-area-inset-top)' }}>25      <div className="mx-auto flex h-[var(--ri-header-h)] max-w-[1440px] items-center gap-2 px-3 sm:px-6">26        <MobileNav items={NAV} groups={NAV_GROUPS} />27        <Logo />28        <nav className="ml-3 hidden items-center gap-0.5 lg:flex" aria-label="Primary">29          {PRIMARY_NAV.map((n) => (30            <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">31              {n.label}32            </Link>33          ))}34          <details className="group relative">35            <summary className="plain cursor-pointer rounded-md px-2.5 py-1.5 text-[13px] font-medium text-muted hover:bg-inset hover:text-fg group-open:bg-inset group-open:text-fg">More</summary>36            <div className="absolute left-0 top-full z-50 mt-1.5 grid w-[680px] grid-cols-3 gap-5 rounded-lg border border-border bg-elevated p-4 shadow-pop">37              {NAV_GROUPS.map((g) => (38                <div key={g.id}>39                  <p className="t-label mb-1.5">{g.label}</p>40                  <ul className="space-y-0.5">41                    {NAV.filter((n) => n.group === g.id).map((n) => (42                      <li key={n.href}>43                        <Link href={n.href} className="block rounded-sm px-1.5 py-1 hover:bg-inset">44                          <span className="block text-[13px] text-fg">{n.label}</span>45                          <span className="block truncate text-[11px] text-subtle">{n.description}</span>46                        </Link>47                      </li>48                    ))}49                  </ul>50                </div>51              ))}52            </div>53          </details>54        </nav>55        <div className="ml-auto flex items-center gap-1">56          <HeaderSearch />57          <ThemeToggle />58          <UserMenu />59        </div>60      </div>61    </header>62  );63}64