changing the drop down behaviour

asyncapi · Jun 25, 2024 · 26f5f30 · 26f5f30
1 parent 554dce0
commit 26f5f30
Showing 1 changed file with 16 additions and 18 deletions.
diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
@@ -18,20 +18,20 @@ function Navbar() {
 	const svg = useRef(null);
 	const handleClosing = useCallback((event) => {
 		if (show && !event.target.closest('.subMenu')) {
-			setShow(false);
+			setShow(null);
 		}
 	}, [show]);
 	useEffect(() => {
 		document.addEventListener('mousedown', handleClosing);
 		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 (
 		<div className='flex justify-center items-center sticky top-0 z-[99] text-white'>
 			<div className='w-[1131px]'>
@@ -77,15 +79,13 @@ function Navbar() {
 							{links.map((link) => (
 								<div href={link.ref} key={link.title}>
 									<div
-										onMouseEnter={() => 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'
 									>
 										<div>
 											{link.subMenu ? (
-												<div
-													onMouseEnter={handleVenueHover}
-													className='flex items-center '>
+												<div className='flex items-center'>
 													{link.title}{' '}
 													{link.subMenu && (
 														<Dropdown
@@ -99,8 +99,7 @@ function Navbar() {
 												<Link href={link.ref}>{link.title}</Link>
 											)}
 										</div>
-										{show && show === link.title && link.subMenu && (
-
+										{show === link.title && link.subMenu && (
 											<div className='subMenu absolute z-[9] mt-8 w-[140px] rounded-md left-[-15px] gradient-bg px-2 py-1 flex flex-col justify-center space-y-0'>
 												{link.subMenu.map((subL) => (
 													<Link href={subL.ref} key={subL.title}>
@@ -109,11 +108,10 @@ function Navbar() {
 																{subL.title}
 															</div>
 														) : (
-															<div className='h-[32px]  text-[16px] hover:scale-95 hover:translate-x-1 transition-all'>
-															{subL.title}
-														</div>
+															<div className='h-[32px] text-[16px] hover:scale-95 hover:translate-x-1 transition-all'>
+																{subL.title}
+															</div>
 														)}
-
 													</Link>
 												))}
 											</div>
@@ -130,4 +128,4 @@ function Navbar() {
 	);
 }
 
-export default Navbar;
+export default Navbar;