Added MenuContext for handling navigation

src/contexts/MenuContext.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React, { useContext, useEffect } from 'react';
+
+interface MenuContextType {
+  isMenuOpen: boolean;
+  toggleMenu: () => void;
+  closeMenu: () => void;
+  openMenu: () => void;
+}
+
+const MenuContext = React.createContext<MenuContextType | undefined>(undefined);
+
+interface MenuProviderProps {
+  children: React.ReactNode;
+}
+
+export const MenuProvider = ({ children }: MenuProviderProps) => {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+
+  const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
+  const closeMenu = () => setIsMenuOpen(false);
+  const openMenu = () => setIsMenuOpen(true);
+
+  useEffect(() => {
+    if (isMenuOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = 'unset';
+    }
+    return () => {
+      document.body.style.overflow = 'unset';
+    };
+  }, [isMenuOpen]);
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && isMenuOpen) {
+        closeMenu();
+      }
+    };
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isMenuOpen]);
+
+  return (
+    <MenuContext.Provider
+      value={{ isMenuOpen, toggleMenu, openMenu, closeMenu }}
+    >
+      {children}
+    </MenuContext.Provider>
+  );
+};
+
+export const useMenu = () => {
+  const context = useContext(MenuContext);
+  if (context === undefined) {
+    throw new Error('useMenu must be used within a MenuProvider');
+  }
+  return context;
+};