lan-reader-chat/components/site-header.tsx

"use client";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";

const navItems = [
  { href: "/", label: "首页" },
  { href: "/chat", label: "聊天室" },
  { href: "/library", label: "书架" },
  { href: "/agents", label: "Agent 观察" }
];

export function SiteHeader() {
  const pathname = usePathname();
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    setMenuOpen(false);
  }, [pathname]);

  useEffect(() => {
    const onKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        setMenuOpen(false);
      }
    };

    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, []);

  if (pathname?.startsWith("/reader/")) {
    return null;
  }

  return (
    <header className={`site-header${menuOpen ? " site-header--menu-open" : ""}`}>
      <div className="page-shell site-header__inner">
        <Link href="/" className="site-brand">
          <div className="site-brand__mark">LAN</div>
          <div>
            <div className="site-brand__name">局域网书房</div>
            <div className="site-brand__tag">聊天、传文件、看小说，放在一个入口里</div>
          </div>
        </Link>

        <nav className="site-nav" aria-label="主导航">
          {navItems.map((item) => (
            <Link key={item.href} href={item.href} className={pathname === item.href ? "is-active" : undefined}>
              {item.label}
            </Link>
          ))}
        </nav>

        <button
          type="button"
          className={`site-menu-button${menuOpen ? " is-open" : ""}`}
          aria-expanded={menuOpen}
          aria-controls="mobile-site-nav"
          aria-label={menuOpen ? "关闭导航" : "打开导航"}
          onClick={() => setMenuOpen((value) => !value)}
        >
          <span />
          <span />
          <span />
        </button>
      </div>

      <div
        className={`site-drawer-backdrop${menuOpen ? " is-open" : ""}`}
        onClick={() => setMenuOpen(false)}
        aria-hidden={!menuOpen}
      />

      <div className={`site-drawer${menuOpen ? " is-open" : ""}`} id="mobile-site-nav" aria-hidden={!menuOpen}>
        <div className="site-drawer__panel">
          <div className="site-drawer__top">
            <div>
              <div className="site-drawer__title">导航</div>
              <div className="site-drawer__hint">手机端单独唤出，和页面正文彻底分层</div>
            </div>
            <button
              type="button"
              className="site-drawer__close"
              aria-label="关闭导航"
              onClick={() => setMenuOpen(false)}
            >
              关闭
            </button>
          </div>

          <nav className="site-drawer__nav" aria-label="移动端主导航">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className={pathname === item.href ? "is-active" : undefined}
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
      </div>
    </header>
  );
}