navbar tests

components/Hamburger.tsx

@@ -10,7 +10,7 @@ const Hamburger = () => {
     <>
       <div
         ref={hamburgerButtonRef}
-        className="space-y-2 relative z-[99999]"
+        className="hamburger-button space-y-2 relative z-[99999]"
         onClick={() => setMenuVisible(!menuVisible)}
       >
         <div

components/HamburgerMenu.tsx

@@ -1,57 +1,29 @@
-import Link from "next/link";
-import ThemeSwitcher from "@/components/ThemeSwitcher";
-import {
-  Dispatch,
-  RefObject,
-  SetStateAction,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
-
-type hamburgerMenuState = {
+interface HamburgerMenuState {
   menuVisible: boolean;
   setMenuVisible: Dispatch<SetStateAction<boolean>>;
   hamburgerButtonRef: RefObject<HTMLDivElement>;
-};
+}
+
+import Link from "next/link";
+import ThemeSwitcher from "@/components/ThemeSwitcher";
+import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
+import useHamburgerClose from "@/hooks/useHamburgerClose";
 
 const HamburgerMenu = ({
   menuVisible,
   setMenuVisible,
   hamburgerButtonRef,
-}: hamburgerMenuState) => {
+}: HamburgerMenuState) => {
   const [mouseOverMenu, setMouseOverMenu] = useState(false);
   const timeoutRef = useRef<NodeJS.Timeout | undefined>();
   const menuRef = useRef<HTMLDivElement>(null);
 
-  useEffect(() => {
-    const handleMouseDownOutsideMenu = (event: MouseEvent) => {
-      if (
-        menuVisible &&
-        menuRef.current &&
-        !menuRef.current.contains(event.target as Node) &&
-        hamburgerButtonRef.current &&
-        !hamburgerButtonRef.current.contains(event.target as Node)
-      ) {
-        setMenuVisible(false);
-        setMouseOverMenu(false);
-      }
-    };
-
-    document.addEventListener("mousedown", handleMouseDownOutsideMenu);
-
-    return () => {
-      document.removeEventListener("mousedown", handleMouseDownOutsideMenu);
-    };
-  }, [menuVisible]);
-
-  useEffect(() => {
-    if (menuVisible && !mouseOverMenu) {
-      menuTimeout();
-    } else {
-      clearTimeout(timeoutRef.current);
-    }
-  }, [mouseOverMenu, menuVisible]);
+  const menuTimeout = () => {
+    timeoutRef.current = setTimeout(() => {
+      setMenuVisible(false);
+      setMouseOverMenu(false);
+    }, 2000);
+  };
 
   const handleMouseEnterMenu = () => {
     setMouseOverMenu(true);
@@ -63,12 +35,16 @@ const HamburgerMenu = ({
     clearTimeout(timeoutRef.current);
   };
 
-  const menuTimeout = () => {
-    timeoutRef.current = setTimeout(() => {
-      setMenuVisible(false);
-      setMouseOverMenu(false);
-    }, 2000);
-  };
+  useHamburgerClose({
+    menuVisible,
+    setMenuVisible,
+    menuRef,
+    hamburgerButtonRef,
+    mouseOverMenu,
+    setMouseOverMenu,
+    timeoutRef,
+    menuTimeout,
+  });
 
   return (
     <div

components/Navbar.tsx

@@ -14,11 +14,11 @@ export default function Navbar() {
             <span className="text-2xl">Echecs France</span>
           </Link>
         </div>
-        <div className="pb-2 md:hidden">
+        <div className="mobile-menu pb-2 md:hidden">
           <Hamburger />
         </div>
 
-        <div className="hidden pt-2 justify-center md:flex md:w-1/2 md:justify-end">
+        <div className="desktop-menu hidden pt-2 justify-center md:flex md:w-1/2 md:justify-end">
           <ul className="list-reset text-gray-900 dark:text-white no-underline flex flex-1 justify-around md:flex-none items-center">
             <li className="mr-10">
               <Link

components/ThemeSwitcher.tsx

@@ -3,6 +3,7 @@
 import { MdBrightness2, MdCircle } from "react-icons/md";
 import useDarkMode from "@/hooks/useDarkMode";
 import { useEffect, useState } from "react";
+import "@/css/theme-toggle.css";
 
 const ThemeSwitcher = () => {
   const [mounted, setMounted] = useState(false);
@@ -19,18 +20,12 @@ const ThemeSwitcher = () => {
   return (
     <div>
       {colorTheme === "light" ? (
-        <div
-          className="relative cursor-pointer h-8 w-12 rounded-[50px] margin-auto bg-gradient-to-r from-blue-900 to-purple-900"
-          onClick={() => setTheme("light")}
-        >
-          <MdBrightness2 className="ml-auto h-8 w-5" />
+        <div className="toggle-dark" onClick={() => setTheme("light")}>
+          <MdBrightness2 className="theme-icon-dark" />
         </div>
       ) : (
-        <div
-          className="relative cursor-pointer h-8 w-12 rounded-[50px] margin-auto bg-gradient-to-r from-teal-300 to-sky-500"
-          onClick={() => setTheme("dark")}
-        >
-          <MdCircle className="ml-1 h-8 w-5 text-yellow-300" />
+        <div className="toggle" onClick={() => setTheme("dark")}>
+          <MdCircle className="theme-icon" />
         </div>
       )}
     </div>