Spaces:
Build error
Build error
File size: 2,922 Bytes
f730525 7091242 f730525 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
"use client";
import { useEffect, useRef } from 'react';
import Image, { StaticImageData } from 'next/image';
import { HeaderNavLink } from '@/app/components/ui/navlink';
import { useMedia } from 'react-use';
interface MenuItem {
href: string;
icon: React.ReactNode;
label: string;
}
interface MobileMenuProps {
isOpen: boolean;
onClose: () => void;
logoSrc: StaticImageData;
items: MenuItem[];
}
const MobileMenu: React.FC<MobileMenuProps> = ({ isOpen, onClose, logoSrc, items }) => {
const isLargeScreen = useMedia('(min-width: 1024px)', false);
const menuRef = useRef<HTMLDivElement | null>(null);
useEffect(() => {
const handleOutsideClick = (event: MouseEvent | TouchEvent) => {
if (
!isLargeScreen &&
isOpen &&
!menuRef.current?.contains(event.target as Node) &&
!((event.target as HTMLElement).closest('.toggle-button')) // Exclude the toggle button
) {
onClose(); // Close the menu
}
};
if (!isLargeScreen && isOpen) {
// Add event listeners for both mouse and touch events
document.addEventListener('mousedown', handleOutsideClick);
}
return () => {
// Remove the event listener when the component unmounts
document.removeEventListener('mousedown', handleOutsideClick);
};
}, [isLargeScreen, isOpen, onClose]);
useEffect(() => {
if (isLargeScreen && isOpen) {
onClose();
}
}, [isLargeScreen, isOpen, onClose]);
return (
<div ref={menuRef} className={`w-full h-full p-2 bg-opacity-80 transition-transform duration-300 ${isOpen ? 'flex' : 'hidden'}`}>
<div className="flex items-center justify-center mt-2" style={{ width: '9%', height: '9%' }}>
<Image
className='rounded-full max-w-full'
src={logoSrc}
alt="Logo"
style={{
width: 'auto',
height: 'auto',
}}
priority
sizes="100vw, 50vw, 33vw"
/>
</div>
<div className="flex items-center justify-center h-full">
{/* Mobile menu content */}
<div className="w-64 p-4 rounded-r-md">
{items.map((item, index) => (
<HeaderNavLink key={index} href={item.href} onClick={onClose}>
<div className="flex items-center mb-4">
{item.icon}
{item.label}
</div>
</HeaderNavLink>
))}
</div>
</div>
</div>
);
};
export { MobileMenu };
|