fix: fixed the venue sub menu not closing (#248)

* Fixed the closing issue * Fixed errors --------- Co-authored-by: Ace <[email protected]>
asyncapi · Nov 22, 2023 · aa0a693 · aa0a693
1 parent e9f60a6
commit aa0a693
Showing 1 changed file with 15 additions and 6 deletions.
diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
@@ -1,17 +1,26 @@
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
-import { useState } from 'react';
+import { useState,useEffect } from 'react';
 import links from '../../config/links.json';
 import NavDrop from './navDrop';
 import Hamburger from '../illustration/hamburger';
 import { useMediaQuery } from 'react-responsive';
 import Cancel from '../illustration/cancel';
 
 
+
 function Navbar() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
 	const [drop, setDrop] = useState(false);
 	const [show, setShow] = useState(null);
+	function handleClosing(event) {
+		if (show && !event.target.closest('.subMenu')) {
+			setShow(false);
+		}
+	}
+	useEffect(() => {
+		document.addEventListener('mousedown', handleClosing);
+	}, [show]);
 	return (
 		<div className='container flex justify-center items-center sticky top-0 backdrop-blur z-[99]'>
 			<div className='w-[1131px]'>
@@ -43,16 +52,16 @@ function Navbar() {
 										onClick={() =>
 											show === link.title ? setShow(null) : setShow(link.title)
 										}
-										className='text-[#F0F4F5] ml-16 text-[15px] cursor-pointer relative flex flex-col'
+										className='text-[#F0F4F5] ml-16 text-[15px] group cursor-pointer relative flex flex-col'
 									>
 										<div>
 											{link.subMenu ? (
-												<div className='flex items-center'>
+												<div className='flex items-center '>
 													{link.title}{' '}
 													{link.subMenu && (
 														<Dropdown
 															className={`ml-2 transition-transform duration-700 ${show === link.title ? 'rotate-180' : 'rotate-0'
-																}`}
+															}`}
 														/>
 													)}
 												</div>
@@ -61,7 +70,7 @@ function Navbar() {
 											)}
 										</div>
 										{show && show === link.title && link.subMenu && (
-											<div className='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 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]'>
@@ -83,4 +92,4 @@ function Navbar() {
 	);
 }
 
-export default Navbar;
+export default Navbar;