hamburger menu timeout

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

components/Hamburger.tsx

@@ -27,7 +27,12 @@ const Hamburger = () => {
           }`}
         ></div>
       </div>
-      {<HamburgerMenu menuVisible={menuVisible} />}
+      {
+        <HamburgerMenu
+          menuVisible={menuVisible}
+          setMenuVisible={setMenuVisible}
+        />
+      }
     </>
   );
 };

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">