Update packages (and fix intl)

2026-07-23 04:26:57 +00:00 · 2023-09-13 20:33:56 +02:00
parent cebf5d98b8
commit bff704077c
43 changed files with 1147 additions and 1597 deletions
@@ -0,0 +1,94 @@
+import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
+
+import { useTranslations } from "next-intl";
+import Link from "next-intl/link";
+import { twMerge } from "tailwind-merge";
+
+import useHamburgerClose from "@/hooks/useHamburgerClose";
+
+interface HamburgerMenuState {
+  menuVisible: boolean;
+  setMenuVisible: Dispatch<SetStateAction<boolean>>;
+  hamburgerButtonRef: RefObject<HTMLDivElement>;
+}
+
+const HamburgerMenu = ({
+  menuVisible,
+  setMenuVisible,
+  hamburgerButtonRef,
+}: HamburgerMenuState) => {
+  const t = useTranslations("Nav");
+  const [mouseOverMenu, setMouseOverMenu] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | undefined>();
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  const menuTimeout = () => {
+    timeoutRef.current = setTimeout(() => {
+      setMenuVisible(false);
+      setMouseOverMenu(false);
+    }, 4000);
+  };
+
+  const handleMouseEnterMenu = () => {
+    setMouseOverMenu(true);
+    clearTimeout(timeoutRef.current);
+  };
+
+  const handleMouseLeaveMenu = () => {
+    setMouseOverMenu(false);
+    clearTimeout(timeoutRef.current);
+  };
+
+  useHamburgerClose({
+    menuVisible,
+    setMenuVisible,
+    menuRef,
+    hamburgerButtonRef,
+    mouseOverMenu,
+    setMouseOverMenu,
+    timeoutRef,
+    menuTimeout,
+  });
+
+  return (
+    <div
+      ref={menuRef}
+      className={twMerge(
+        "fixed right-0 top-0 z-[9999] h-[calc(100svh-5rem)] w-full",
+        "flex items-center justify-center bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden",
+        !menuVisible && "translate-x-full",
+      )}
+      onMouseEnter={handleMouseEnterMenu}
+      onMouseLeave={handleMouseLeaveMenu}
+    >
+      <ul className="list-reset text-white">
+        <li className="py-5 text-center text-xl">
+          <Link
+            href="/tournois"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("tournaments")}
+          </Link>
+        </li>
+        <li className="py-5 text-center text-xl">
+          <Link
+            href="/qui-sommes-nous"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("about")}
+          </Link>
+        </li>
+        <li className="py-5 text-center text-xl">
+          <Link
+            href="/contactez-nous"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("contact")}
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default HamburgerMenu;