'use client'; import Image from 'next/image'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { useContext, useEffect, useRef, useState } from 'react'; import GlobalContext from '@/context/GlobalContext'; import burger from '@/public/menu-outline.svg'; const Nav = () => { const path = usePathname() ?? '/'; const { burgerOpen, setBurgerOpen } = useContext(GlobalContext).burgerContext; const [dropDownOpened, setDropDownOpened] = useState(false); // const dropdownRef = useRef(null); const dropdownRef = useRef(null); useEffect(() => { const handleOutsideClick = (event: MouseEvent) => { if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) { setDropDownOpened(false); } }; // Attach the event listener to the document document.addEventListener('click', handleOutsideClick); // Cleanup the event listener when the component unmounts return () => { document.removeEventListener('click', handleOutsideClick); }; }, []); return ( ); }; export default Nav;