62 lines
1.5 KiB
TypeScript
62 lines
1.5 KiB
TypeScript
'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;
|
|
};
|