From cb79da4b18db2af2f0c1cef4616ddbb5980936ac Mon Sep 17 00:00:00 2001
From: GivFNZ <givfnz@p0ntus.com>
Date: Fri, 28 Feb 2025 17:55:42 -0300
Subject: [PATCH] feat: hide drawer when user clicks outside

---
 src/App.tsx                     |  2 +-
 src/components/Header/index.tsx |  8 ++++----
 src/hooks/useDrawerVisible.tsx  | 21 +++++++++++++++++++++
 3 files changed, 26 insertions(+), 5 deletions(-)
 create mode 100644 src/hooks/useDrawerVisible.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 74e0196..03fbfbd 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -37,7 +37,7 @@ function App() {
       </HashRouter>
       <footer>
         <p>© 2025 GivFNZ</p>
-        <p>Version: 1.1.9</p>
+        <p>Version: 1.1.10</p>
       </footer>
     </ThemeProvider>
   );
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index c7a9594..47d22e6 100644
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -4,18 +4,19 @@ import { AvatarHeader } from "../Avatar/avatar";
 import i18n from "../../utils/i18n";
 import { t } from "i18next";
 import { Drawer, DrawerContainer, DrawerItem } from "../Drawer/styles";
-import { useState } from "react";
+import useDrawerVisible from "../../hooks/useDrawerVisible";
 
 export default function Header() {
   const changeLanguage = (event: React.ChangeEvent<HTMLSelectElement>) => {
     i18n.changeLanguage(event.target.value);
     localStorage.setItem("language", event.target.value);
   };
-  const [openDrawer, setOpenDrawer] = useState(false);
+  const { ref, openDrawer, setOpenDrawer } = useDrawerVisible();
   return (
     <>
       <HashRouter>
-        <HeaderContainer>
+        <HeaderContainer ref={ref}>
+          <Drawer onClick={() => setOpenDrawer(!openDrawer)} />
           <HomeLink href="/">
             <AvatarHeader src="https://avatars.githubusercontent.com/u/53719063?v=4" alt="Giv's Gh picture" />
             <span>Giv's Website</span>
@@ -24,7 +25,6 @@ export default function Header() {
             <NavLink href="#about">{t("about")}</NavLink>
             <NavLink href="#contact">{t("contact")}</NavLink>
             <NavLink href="#projects">{t("projects")}</NavLink>
-            <Drawer onClick={() => setOpenDrawer(!openDrawer)} />
             <LanguageSelector onChange={changeLanguage}>
               <option value="pt-br">
                 Português
diff --git a/src/hooks/useDrawerVisible.tsx b/src/hooks/useDrawerVisible.tsx
new file mode 100644
index 0000000..d93c2b2
--- /dev/null
+++ b/src/hooks/useDrawerVisible.tsx
@@ -0,0 +1,21 @@
+import { useState, useEffect, useRef } from 'react';
+
+export default function useDrawerVisible() {
+    const [openDrawer, setOpenDrawer] = useState(false);
+    const ref = useRef<HTMLDivElement>(null);
+
+    const handleClickOutside = (event: MouseEvent) => {
+        if (ref.current && !ref.current.contains(event.target as Node)) {
+            setOpenDrawer(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside, true);
+        return () => {
+            document.removeEventListener('click', handleClickOutside, true);
+        };
+    }, []);
+
+    return { ref, openDrawer, setOpenDrawer };
+}
\ No newline at end of file