dropdown on click outside hide handled

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "react-typescript-chess-federation",
-  "version": "0.1.0",
+  "version": "1.6.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "react-typescript-chess-federation",
-      "version": "0.1.0",
+      "version": "1.6.3",
       "dependencies": {
         "@googlemaps/react-wrapper": "^1.1.35",
         "@testing-library/jest-dom": "^5.16.4",

src/components/global/Nav.tsx

@@ -1,6 +1,6 @@
 // Modules
-import { Link } from "react-router-dom";
-import { useLocation } from "react-router-dom";
+import { useRef, useEffect } from 'react';
+import { useLocation, Link } from "react-router-dom";
 
 // Icons
 import mainLogo from "../../icons/main_logo.svg";
@@ -16,6 +16,19 @@ const Nav = ({
   setBurgerOpen,
 }: navProps) => {
   const location = useLocation();
+  const ref = useRef<any>(null);
+  const refTrigger = useRef<any>(null);
+
+  useEffect(() => {
+    if(ref.current && refTrigger.current){
+      window.addEventListener('click', (e:any) => {
+        if(!e.target.contains(ref.current) && !e.target.contains(refTrigger.current)){
+          setDropdown(false);
+        }
+      })
+    }
+  }, [setDropdown, ref])
+
   return (
     <nav className="nav">
       <div className="container">
@@ -28,6 +41,7 @@ const Nav = ({
           <div className="nav-content">
             <ul className="nav-list">
               <li
+                ref={refTrigger}
                 className="nav-non-link"
                 onClick={() => {
                   setDropdown((initial) => !initial);
@@ -38,6 +52,7 @@ const Nav = ({
                   <Arrow className="arrow" />
                 </div>
                 <ul
+                  ref={ref}
                   className={
                     dropdown ? "nav-dropdown" : "nav-dropdown disabled"
                   }

src/styles/_nav.scss

@@ -100,6 +100,10 @@
   align-items: center;
   gap: 1rem;
 
+  *{
+    pointer-events: none;
+  }
+
   .arrow {
     // fill: black;
     width: 2rem;