first commit

src/components/layout/HeaderUIProvider.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { createContext, useCallback, useContext, useState, type ReactNode } from "react";
+
+type HeaderUIContextValue = {
+  isMenuOpen: boolean;
+  isSidebarOpen: boolean;
+  toggleMenu: () => void;
+  toggleSidebar: () => void;
+  closeAll: () => void;
+};
+
+const HeaderUIContext = createContext<HeaderUIContextValue | null>(null);
+
+/**
+ * Provider for header UI state (mobile menu + slide sidebar open/closed).
+ * Lifted out of Header so BodyOverlay (sibling of header in production DOM) can read it.
+ */
+export function HeaderUIProvider({ children }: { children: ReactNode }) {
+  const [isMenuOpen, setMenuOpen] = useState(false);
+  const [isSidebarOpen, setSidebarOpen] = useState(false);
+
+  const toggleMenu = useCallback(() => {
+    setMenuOpen((o) => !o);
+    setSidebarOpen(false);
+  }, []);
+
+  const toggleSidebar = useCallback(() => {
+    setSidebarOpen((o) => !o);
+    setMenuOpen(false);
+  }, []);
+
+  const closeAll = useCallback(() => {
+    setMenuOpen(false);
+    setSidebarOpen(false);
+  }, []);
+
+  return (
+    <HeaderUIContext.Provider value={{ isMenuOpen, isSidebarOpen, toggleMenu, toggleSidebar, closeAll }}>
+      {children}
+    </HeaderUIContext.Provider>
+  );
+}
+
+export function useHeaderUI() {
+  const ctx = useContext(HeaderUIContext);
+  if (!ctx) throw new Error("useHeaderUI must be used inside <HeaderUIProvider>");
+  return ctx;
+}