spb/autoscholar

1import Link from "next/link";2import { t } from "@/lib/i18n";3import { ThemeToggle } from "./ThemeToggle";45const NAV = [6  ["/research", "nav.research"],7  ["/topics", "nav.topics"],8  ["/series", "nav.series"],9  ["/methodology", "nav.methodology"],10  ["/infrastructure", "nav.infrastructure"],11  ["/transparency", "nav.transparency"],12  ["/about", "nav.about"],13] as const;1415export function SiteHeader() {16  return (17    <header18      className="sticky top-0 z-40 border-b hairline backdrop-blur"19      style={{ background: "color-mix(in oklab, var(--bg) 88%, transparent)" }}20    >21      <div className="container-x flex h-14 items-center justify-between gap-4">22        <Link href="/" className="flex items-baseline gap-2 no-underline">23          <span className="serif text-lg font-semibold tracking-tight">AutoScholar</span>24          <span className="subtle text-xs">.ai</span>25        </Link>26        <nav aria-label="Primary" className="hidden items-center gap-5 md:flex">27          {NAV.map(([href, key]) => (28            <Link key={href} href={href} className="muted text-sm hover:text-[var(--fg)]">29              {t(key)}30            </Link>31          ))}32        </nav>33        <div className="flex items-center gap-2">34          <Link href="/research" className="btn btn-sm md:hidden">35            {t("nav.research")}36          </Link>37          <ThemeToggle label={t("theme.toggle")} />38        </div>39      </div>40      <nav aria-label="Secondary" className="container-x flex gap-4 overflow-x-auto py-2 md:hidden">41        {NAV.slice(1).map(([href, key]) => (42          <Link key={href} href={href} className="muted whitespace-nowrap text-xs">43            {t(key)}44          </Link>45        ))}46      </nav>47    </header>48  );49}50