Fixed the closing issue

asyncapi · Nov 15, 2023 · 9f1ae34 · 9f1ae34
1 parent c511344
commit 9f1ae34
Showing 1 changed file with 17 additions and 6 deletions.
diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
@@ -1,6 +1,6 @@
 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';
@@ -12,6 +12,17 @@ function Navbar() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
 	const [drop, setDrop] = useState(false);
 	const [show, setShow] = useState(null);
+	useEffect(() => {
+		function handleClosing(event) {
+			if (show && !event.target.closest('.subMenu')) {
+				setShow(false);
+			}
+		}
+		document.addEventListener('mousedown', handleClosing);
+		return () => {
+			document.removeEventListener('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 +54,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 +72,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 group-hover:bg-red-300 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 +94,4 @@ function Navbar() {
 	);
 }
 
-export default Navbar;
+export default Navbar;