spb/autoscholar

1import Link from "next/link";2import { t } from "@/lib/i18n";3import { HeaderChrome } from "./HeaderChrome";4import { IconSearch } from "./Icons";5import { ThemeToggle } from "./ThemeToggle";67export const NAV = [8  ["/research", "nav.research"],9  ["/topics", "nav.topics"],10  ["/series", "nav.series"],11  ["/methodology", "nav.methodology"],12  ["/infrastructure", "nav.infrastructure"],13  ["/transparency", "nav.transparency"],14  ["/about", "nav.about"],15] as const;1617export function Wordmark({ className = "" }: { className?: string }) {18  return (19    <Link20      href="/"21      className={`flex items-center gap-2 no-underline ${className}`}22      aria-label="AutoScholar.ai home"23    >24      <span25        aria-hidden="true"26        className="grid h-7 w-7 place-items-center rounded-md text-[11px] font-semibold tracking-tight"27        style={{ background: "var(--fg)", color: "var(--bg)", fontFamily: "var(--font-serif)" }}28      >29        As30      </span>31      <span className="serif text-[1.15rem] font-medium tracking-tight">32        AutoScholar<span className="subtle text-xs font-normal">.ai</span>33      </span>34    </Link>35  );36}3738/** Compact sticky header: one row on every width; drawer + search on mobile, inline nav on desktop. */39export function SiteHeader() {40  const links = NAV.map(([href, key]) => ({ href, label: t(key) }));41  return (42    <HeaderChrome links={links}>43      <div44        className="container-x flex items-center justify-between gap-3"45        style={{ height: "var(--header-h)" }}46      >47        <Wordmark />48        <nav aria-label="Primary" className="hidden items-center gap-0.5 lg:flex">49          {links.map((l) => (50            <Link key={l.href} href={l.href} className="nav-link">51              {l.label}52            </Link>53          ))}54        </nav>55        <div className="flex items-center gap-1">56          <form action="/research" method="get" role="search" className="relative hidden md:block">57            <label htmlFor="header-q" className="sr-only">58              Search the library59            </label>60            <IconSearch61              size={16}62              className="pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 subtle"63            />64            <input65              id="header-q"66              name="q"67              type="search"68              placeholder="Search papers"69              className="input h-9 w-44 pl-8 text-xs xl:w-56"70              style={{ minHeight: "2.25rem" }}71            />72          </form>73          <Link href="/research" className="btn-icon md:hidden" aria-label="Search the library">74            <IconSearch />75          </Link>76          <ThemeToggle label={t("theme.toggle")} />77        </div>78      </div>79    </HeaderChrome>80  );81}82