fix: hamburger-menu

components/Navbar/navDrop.js

@@ -1,12 +1,14 @@
-import React,{useState} from 'react';
+import React,{useState,forwardRef} from 'react';
 import links from '../../config/links.json';
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
 
-function NavDrop({setDrop}) {
+
+const NavDrop = forwardRef((props, ref)=> {
+	const {setDrop}=props;
     const [show, setShow] = useState(null);
   return (
-		<div className='absolute ml-[-16px] top-16 w-full bg-[#1B1130]'>
+		<div  ref ={ref} className='absolute ml-[-16px] top-16 w-full bg-[#1B1130]'>
 			<div className='flex flex-col p-4 pb-8 w-full'>
 				{links.map((link) => {
 					return (
@@ -54,6 +56,7 @@ function NavDrop({setDrop}) {
 			</div>
 		</div>
 	);
-}
+})
+NavDrop.displayName = 'NavDrop';
 
-export default NavDrop
+export default NavDrop;

components/Navbar/navbar.js

@@ -1,6 +1,6 @@
 import Link from 'next/link';
 import Dropdown from '../illustration/dropdown';
-import { useState,useEffect } from 'react';
+import { useState,useEffect,useRef} from 'react';
 import links from '../../config/links.json';
 import NavDrop from './navDrop';
 import Hamburger from '../illustration/hamburger';
@@ -13,6 +13,8 @@ function Navbar() {
 	const isTablet = useMediaQuery({ maxWidth: '1118px' });
 	const [drop, setDrop] = useState(false);
 	const [show, setShow] = useState(null);
+	const menuRef = useRef(null);
+	const svg = useRef(null);
 	function handleClosing(event) {
 		if (show && !event.target.closest('.subMenu')) {
 			setShow(false);
@@ -21,6 +23,21 @@ function Navbar() {
 	useEffect(() => {
 		document.addEventListener('mousedown', handleClosing);
 	}, [show]);
+
+	const handleCloseMenu = (event) => {
+		if (menuRef .current && !menuRef .current.contains(event.target)) {
+			setDrop(false);
+		  }if(svg.current&&event.target==svg.current){
+			setDrop(true);
+		  }
+	};
+
+	useEffect(() => {
+	  document.addEventListener('click', handleCloseMenu);
+	  return () => {
+		document.removeEventListener('click', handleCloseMenu);
+	  };
+	}, [menuRef]);
 	return (
 		<div className='container flex justify-center items-center sticky top-0 backdrop-blur z-[99]'>
 			<div className='w-[1131px]'>
@@ -35,12 +52,12 @@ function Navbar() {
 					{isTablet ? (
 						<div>
 							{drop ? (
-								<button onClick={() => setDrop(false)}>
+								<button>
 									<Cancel />
 								</button>
 							) : (
-								<button onClick={() => setDrop(true)}>
-									<Hamburger />
+								<button>
+									<Hamburger  ref={svg}/>
 								</button>
 							)}
 						</div>
@@ -85,7 +102,7 @@ function Navbar() {
 							))}
 						</div>
 					)}
-					{isTablet && drop && <NavDrop setDrop={setDrop} />}
+					{isTablet && drop && <NavDrop setDrop={setDrop}  ref={menuRef} />}
 				</div>
 			</div>
 		</div>

components/illustration/hamburger.js

@@ -1,8 +1,9 @@
-import React from 'react'
+import React,{forwardRef} from 'react'
 
-function Hamburger({className}) {
+const Hamburger = forwardRef((props, ref)=> {
+	const {className} = props;
     return (
-			<svg
+			<svg ref ={ref}
 				width='30px'
 				height='30px'
 				viewBox='0 0 24 24'
@@ -40,6 +41,7 @@ function Hamburger({className}) {
 				</g>
 			</svg>
 		);
-}
+})
+Hamburger.displayName = 'Hamburger';
 
 export default Hamburger