From bffb9c154825160a92fffc1a26a418363f70e00f Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Fri, 16 Jun 2023 11:18:16 +0200
Subject: [PATCH] hamburger menu timeout

---
 TODO                         | 18 +++++++++++------
 components/Hamburger.tsx     |  7 ++++++-
 components/HamburgerMenu.tsx | 38 +++++++++++++++++++++++++++++++++++-
 3 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/TODO b/TODO
index 285cdf9..79f3cdb 100644
--- a/TODO
+++ b/TODO
@@ -1,9 +1,15 @@
+hamburger menu timeout / close when clicking elsewhere
+
+hamburger tests - does it appear on smaller screens, does the menu appear on click
+
+readme
+
+----------------------------------------------------------------
+
+hover on table needs fixing - this only seemed to happen once I moved the logic into its own hook <- error is occurring on all hovers at the moment. Client/SSR issue?
+
 font size on mobile screen
 
-cache-control header
-
-create readme
-
 need a 'return to top' arrow button on smaller screens
 
 mobile map needs improving
@@ -14,8 +20,6 @@ tests for tournois, testing the loading of map and table, then counting the mark
 
 logo for navbar and favicon
 
-hover on table needs fixing - this only seemed to happen once I moved the logic into its own hook <- error is occurring on all hovers at the moment. Client/SSR issue?
-
 document my new hook <- consider removing as I believe this is the reason hover is broken
 
 error handling
@@ -30,3 +34,5 @@ contact page needs working mailer
 SEO
 
 consider offering GraphQL support
+
+move smaller ui components into a new folder, and make them reusable - such as using generic prop names
diff --git a/components/Hamburger.tsx b/components/Hamburger.tsx
index aaef91a..f4a4450 100644
--- a/components/Hamburger.tsx
+++ b/components/Hamburger.tsx
@@ -27,7 +27,12 @@ const Hamburger = () => {
           }`}
         ></div>
       </div>
-      {<HamburgerMenu menuVisible={menuVisible} />}
+      {
+        <HamburgerMenu
+          menuVisible={menuVisible}
+          setMenuVisible={setMenuVisible}
+        />
+      }
     </>
   );
 };
diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx
index 5254bd9..eeb5c6e 100644
--- a/components/HamburgerMenu.tsx
+++ b/components/HamburgerMenu.tsx
@@ -1,12 +1,48 @@
 import Link from "next/link";
 import ThemeSwitcher from "@/components/ThemeSwitcher";
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+
+type menuState = {
+  menuVisible: boolean;
+  setMenuVisible: Dispatch<SetStateAction<boolean>>;
+};
+
+const HamburgerMenu = ({ menuVisible, setMenuVisible }: menuState) => {
+  const [mouseOverMenu, setMouseOverMenu] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>();
+
+  useEffect(() => {
+    if (menuVisible && !mouseOverMenu) {
+      menuTimeout();
+    } else {
+      clearTimeout(timeoutRef.current);
+    }
+  }, [mouseOverMenu]);
+
+  const handleMouseEnterMenu = () => {
+    setMouseOverMenu(true);
+    clearTimeout(timeoutRef.current);
+  };
+
+  const handleMouseLeaveMenu = () => {
+    setMouseOverMenu(false);
+    clearTimeout(timeoutRef.current);
+  };
+
+  const menuTimeout = () => {
+    timeoutRef.current = setTimeout(() => {
+      setMenuVisible(false);
+      setMouseOverMenu(false);
+    }, 2000);
+  };
 
-const HamburgerMenu = ({ menuVisible }: { menuVisible: boolean }) => {
   return (
     <div
       className={`absolute top-0 -right-[173px] ${
         menuVisible ? "-translate-x-full" : ""
       } z-[9999] bg-teal-600 flex md:hidden dark:bg-gray-600 transition-transform duration-500 ease-linear`}
+      onMouseEnter={handleMouseEnterMenu}
+      onMouseLeave={handleMouseLeaveMenu}
     >
       <ul className="list-reset text-white mt-16 p-5">
         <li className="py-5">