Improve responsive layouts and streamline page loading

components/SiteNav.tsx

@@ -3,6 +3,8 @@ 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"],
@@ -17,26 +19,84 @@ const links = [
 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 (
-    <nav aria-label={t("Main navigation")}>
-      {links.map(([href, label]) => (
+    <>
+      <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
-          key={href}
-          href={href}
-          aria-current={
-            pathname === href || pathname.startsWith(`${href}/`)
-              ? "page"
-              : undefined
-          }
+          className="nav-support"
+          href={`/support?from=${encodeURIComponent(pathname)}`}
+          onClick={() => setOpenPath(null)}
         >
-          {t(label)}
+          {t("Report a bug")}
         </Link>
-      ))}
-      {forumUrl && (
-        <a href={forumUrl} target="_blank" rel="noopener noreferrer">
-          {t("Forum")}
-        </a>
-      )}
-    </nav>
+      </nav>
+    </>
   );
 }