diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js index c3ceab1f..7d84b2b1 100644 --- a/components/Navbar/navbar.js +++ b/components/Navbar/navbar.js @@ -18,7 +18,7 @@ function Navbar() { const svg = useRef(null); const handleClosing = useCallback((event) => { if (show && !event.target.closest('.subMenu')) { - setShow(false); + setShow(null); } }, [show]); useEffect(() => { @@ -26,12 +26,12 @@ function Navbar() { return () => { document.removeEventListener('mousedown', handleClosing); }; - }, [handleClosing, show]); + }, [handleClosing]); const handleCloseMenu = (event) => { if (menuRef.current && !menuRef.current.contains(event.target)) { setDrop(false); - } if (svg.current && event.target == svg.current) { + } if (svg.current && event.target === svg.current) { setDrop(true); } }; @@ -43,12 +43,14 @@ function Navbar() { }; }, [menuRef]); - const handleVenueHover = () => { - setShow('Venue'); + const handleMouseEnter = (title) => { + setShow(title); }; - const handleSubMenuLeave = () => { + + const handleMouseLeave = () => { setShow(null); }; + return (
@@ -77,15 +79,13 @@ function Navbar() { {links.map((link) => (
setShow(link.title === 'Venue' ? 'Venue' : null)} - onClick={() => setShow(link.title === 'Venue' ? null : link.title)} + onMouseEnter={() => handleMouseEnter(link.title)} + onMouseLeave={handleMouseLeave} className='ml-16 text-[14px] group cursor-pointer relative flex flex-col' >
{link.subMenu ? ( -
+
{link.title}{' '} {link.subMenu && ( {link.title} )}
- {show && show === link.title && link.subMenu && ( - + {show === link.title && link.subMenu && (
{link.subMenu.map((subL) => ( @@ -109,11 +108,10 @@ function Navbar() { {subL.title}
) : ( -
- {subL.title} -
+
+ {subL.title} +
)} - ))}
@@ -130,4 +128,4 @@ function Navbar() { ); } -export default Navbar; \ No newline at end of file +export default Navbar;