Function TopHeader

web/components/TopHeader.tsx:30–69

()

];

export function TopHeader() {
  const t = useT();
  const pathname = usePathname();

  // active 判定：首页严格相等（"/" 会前缀匹配所有路由，需特判）；其余按前缀匹配子路由
  const isActive = (href: string) =>
    href === "/" ? pathname === "/" : pathname === href || pathname.startsWith(href + "/");

  return (
    <header className="border-b px-4 py-2 flex items-center justify-between bg-background shrink-0">
      <Link href="/" className="text-lg font-semibold">
        {t("app.name")}
      </Link>
      <div className="flex items-center gap-4">
        <nav className="flex gap-4 text-sm">
          {NAV_ITEMS.map(({ href, labelKey }) => {
            const active = isActive(href);
            return (
              <Link
                key={href}
                href={href}
                aria-current={active ? "page" : undefined}
                className={
                  active
                    ? "font-semibold text-foreground border-b-2 border-amber-600/70 dark:border-amber-400/70 -mb-[2px] pb-[2px]"
                    : "text-muted-foreground hover:text-foreground"
                }
              >
                {t(labelKey)}
              </Link>
            );
          })}
        </nav>
        <WorkspaceSwitcher />
        <ConsoleLink />
        <SettingsMenu />
      </div>
    </header>
  );
}