From aa0a693514224d6fe61a6ee06ede8eef1e59d9c3 Mon Sep 17 00:00:00 2001
From: Shashwat Pratap Singh <114943221+ShashwatPS@users.noreply.github.com>
Date: Wed, 22 Nov 2023 15:52:15 +0530
Subject: [PATCH] fix: fixed the venue sub menu not closing (#248)

* Fixed the closing issue

* Fixed errors

---------

Co-authored-by: Ace <40604284+AceTheCreator@users.noreply.github.com>
---
 components/Navbar/navbar.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/components/Navbar/navbar.js b/components/Navbar/navbar.js
index 59ec489c..148d1da7 100644
--- 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';
@@ -8,10 +8,19 @@ 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;
\ No newline at end of file