From 34f0c23526aee43e6cf29d95b97aa93b2456779d Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Tue, 4 Jul 2023 14:03:17 +0200
Subject: [PATCH] Hotfix/hamburger close (#47)

* hamburger link click closes menu

* remove event listeners on unmount
---
 app/[lang]/components/HamburgerMenu.tsx |  1 -
 cypress/e2e/links.cy.ts                 |  2 --
 hooks/useHamburgerClose.ts              | 14 ++++++++++++--
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/app/[lang]/components/HamburgerMenu.tsx b/app/[lang]/components/HamburgerMenu.tsx
index 318d751..528f66c 100644
--- a/app/[lang]/components/HamburgerMenu.tsx
+++ b/app/[lang]/components/HamburgerMenu.tsx
@@ -49,7 +49,6 @@ const HamburgerMenu = ({
     menuTimeout,
   });
 
-  // noinspection HtmlUnknownTarget
   return (
     <div
       ref={menuRef}
diff --git a/cypress/e2e/links.cy.ts b/cypress/e2e/links.cy.ts
index 1232734..c9bf573 100644
--- a/cypress/e2e/links.cy.ts
+++ b/cypress/e2e/links.cy.ts
@@ -1,5 +1,3 @@
-// noinspection HttpUrlsUsage
-
 describe("Test links", () => {
   const pages = ["tournois", "qui sommes-nous", "contactez-nous"];
 
diff --git a/hooks/useHamburgerClose.ts b/hooks/useHamburgerClose.ts
index a26e6ae..73277cc 100644
--- a/hooks/useHamburgerClose.ts
+++ b/hooks/useHamburgerClose.ts
@@ -1,5 +1,3 @@
-// TODO is this really a hook? I think it is more of a util function
-
 interface HamburgerClose {
   menuVisible: boolean;
   setMenuVisible: Dispatch<SetStateAction<boolean>>;
@@ -36,10 +34,22 @@ const useHamburgerClose = ({
         setMouseOverMenu(false);
       }
     };
+
+    const handleLinkClick = () => {
+      setMenuVisible(false);
+    };
+
     document.addEventListener("mousedown", handleMouseDownOutsideMenu);
+    const links = document.querySelectorAll("a");
+    links.forEach((link) => {
+      link.addEventListener("click", handleLinkClick);
+    });
 
     return () => {
       document.removeEventListener("mousedown", handleMouseDownOutsideMenu);
+      links.forEach((link) => {
+        link.removeEventListener("click", handleLinkClick);
+      });
     };
   }, [menuVisible]);