fixed the submenu (#317)

Co-authored-by: V Thulisile Sibanda <[email protected]>
asyncapi · Jun 19, 2024 · 36b0535 · 36b0535
1 parent c09d413
commit 36b0535
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
@@ -22,6 +22,9 @@ function Navbar() {
 	}
 	useEffect(() => {
 		document.addEventListener('mousedown', handleClosing);
+		return () => {
+            document.removeEventListener('mousedown', handleClosing);
+        };
 	}, [show]);
 
 	const handleCloseMenu = (event) => {
@@ -38,6 +41,13 @@ function Navbar() {
 		document.removeEventListener('click', handleCloseMenu);
 	  };
 	}, [menuRef]);
+
+	const handleVenueHover = () => {
+        setShow('Venue');
+    };
+    const handleSubMenuLeave = () => {
+        setShow(null);
+    };
 	return (
 		<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
 			<div className='w-[1131px]'>
@@ -66,14 +76,15 @@ function Navbar() {
 							{links.map((link) => (
 								<div href={link.ref} key={link.title}>
 									<div
-										onClick={() =>
-											show === link.title ? setShow(null) : setShow(link.title)
-										}
+									onMouseEnter={() => setShow(link.title === 'Venue' ? 'Venue' : null)}
+									onClick={() => setShow(link.title === 'Venue' ? null : link.title)}
 										className='ml-16 text-[14px] group cursor-pointer relative flex flex-col'
 									>
 										<div>
 											{link.subMenu ? (
-												<div className='flex items-center '>
+												<div 
+												onMouseEnter={handleVenueHover}
+												className='flex items-center '>
 													{link.title}{' '}
 													{link.subMenu && (
 														<Dropdown
@@ -88,7 +99,9 @@ function Navbar() {
 											)}
 										</div>
 										{show && show === link.title && link.subMenu && (
-											<div className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
+											<div
+											onMouseLeave={handleSubMenuLeave}
+											className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg pl-2 pt-1 flex flex-col justify-center space-y-0'>
 												{link.subMenu.map((subL) => (
 													<Link href={subL.ref} key={subL.title}>
 														<div className='h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all'>