MineGeo/components/SiteNav.tsx

"use client";
import { useI18n } from "@/components/I18nProvider";

import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import { Menu, X } from "lucide-react";

const links = [
  ["/servers", "Play & maps"],
  ["/leaderboard", "Leaderboard"],
  ["/tournaments", "Tournaments"],
  ["/changelogs", "Changelogs"],
  ["/downloads", "Downloads"],
  ["/docs", "Docs"],
] as const;

export function SiteNav({ forumUrl }: { forumUrl?: string | null }) {
  const { t } = useI18n();
  const pathname = usePathname();
  const [openPath, setOpenPath] = useState<string | null>(null);
  const open = openPath === pathname;
  const toggle = useRef<HTMLButtonElement>(null);
  const navigation = useRef<HTMLElement>(null);
  useEffect(() => {
    if (!open) return;
    function dismiss(event: PointerEvent) {
      if (
        event.target instanceof Node &&
        !navigation.current?.contains(event.target) &&
        !toggle.current?.contains(event.target)
      )
        setOpenPath(null);
    }
    function escape(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpenPath(null);
        toggle.current?.focus();
      }
    }
    document.addEventListener("pointerdown", dismiss);
    document.addEventListener("keydown", escape);
    return () => {
      document.removeEventListener("pointerdown", dismiss);
      document.removeEventListener("keydown", escape);
    };
  }, [open]);
  return (
    <>
      <button
        ref={toggle}
        type="button"
        className="nav-toggle"
        aria-label={open ? t("Close navigation") : t("Open navigation")}
        aria-expanded={open}
        aria-controls="site-navigation"
        onClick={() => setOpenPath(open ? null : pathname)}
      >
        {open ? (
          <X size={20} aria-hidden="true" />
        ) : (
          <Menu size={20} aria-hidden="true" />
        )}
      </button>
      <nav
        ref={navigation}
        id="site-navigation"
        className="site-navigation"
        data-open={open}
        aria-label={t("Main navigation")}
      >
        {links.map(([href, label]) => (
          <Link
            key={href}
            href={href}
            onClick={() => setOpenPath(null)}
            aria-current={
              pathname === href || pathname.startsWith(`${href}/`)
                ? "page"
                : undefined
            }
          >
            {t(label)}
          </Link>
        ))}
        {forumUrl && (
          <a href={forumUrl} target="_blank" rel="noopener noreferrer">
            {t("Forum")}
          </a>
        )}
        <Link
          className="nav-support"
          href={`/support?from=${encodeURIComponent(pathname)}`}
          onClick={() => setOpenPath(null)}
        >
          {t("Report a bug")}
        </Link>
      </nav>
    </>
  );
}