From ab2e4e3e5f2b28453d4afc0fccad00cb84f911f7 Mon Sep 17 00:00:00 2001
From: VividTruthKeeper <mr.aydogdy02@gmail.com>
Date: Mon, 5 Sep 2022 14:21:08 +0300
Subject: [PATCH] dropdown on click outside hide handled

---
 package-lock.json             |  4 ++--
 src/components/global/Nav.tsx | 19 +++++++++++++++++--
 src/styles/_nav.scss          |  4 ++++
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index b03141c..aa30c39 100644
--- a/package-lock.json
+++ b/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",
diff --git a/src/components/global/Nav.tsx b/src/components/global/Nav.tsx
index 404b3ff..055586d 100644
--- a/src/components/global/Nav.tsx
+++ b/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"
                   }
diff --git a/src/styles/_nav.scss b/src/styles/_nav.scss
index 583c8fa..6dcd7df 100644
--- a/src/styles/_nav.scss
+++ b/src/styles/_nav.scss
@@ -100,6 +100,10 @@
   align-items: center;
   gap: 1rem;
 
+  *{
+    pointer-events: none;
+  }
+
   .arrow {
     // fill: black;
     width: 2rem;