header (#283)

docs/src/components/mobile-nav-context.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { createContext, useContext, useState, useEffect } from "react";
+import { usePathname } from "next/navigation";
+
+type MobileNavContextType = {
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  toggle: () => void;
+};
+
+const MobileNavContext = createContext<MobileNavContextType | null>(null);
+
+export function MobileNavProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+
+  useEffect(() => {
+    setIsOpen(false);
+  }, [pathname]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, []);
+
+  const toggle = () => setIsOpen(!isOpen);
+
+  return (
+    <MobileNavContext.Provider value={{ isOpen, setIsOpen, toggle }}>
+      {children}
+    </MobileNavContext.Provider>
+  );
+}
+
+export function useMobileNav() {
+  const context = useContext(MobileNavContext);
+  if (!context) {
+    throw new Error("useMobileNav must be used within a MobileNavProvider");
+  }
+  return context;
+}