Fix layout issues & co-locate components (#46)

* Fix layout issues & co-locate components * Fix front page * Fix centering
2026-07-23 04:26:57 +00:00 · 2023-07-04 13:26:25 +02:00
parent a9822b65fe
commit 75a6c74306
26 changed files with 306 additions and 305 deletions
@@ -0,0 +1,95 @@
+interface HamburgerMenuState {
+  menuVisible: boolean;
+  setMenuVisible: Dispatch<SetStateAction<boolean>>;
+  hamburgerButtonRef: RefObject<HTMLDivElement>;
+}
+
+import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
+import Link from "next-intl/link";
+import { useTranslations } from "next-intl";
+
+import useHamburgerClose from "@/hooks/useHamburgerClose";
+import ThemeSwitcher from "./ThemeSwitcher";
+
+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);
+    }, 2000);
+  };
+
+  const handleMouseEnterMenu = () => {
+    setMouseOverMenu(true);
+    clearTimeout(timeoutRef.current);
+  };
+
+  const handleMouseLeaveMenu = () => {
+    setMouseOverMenu(false);
+    clearTimeout(timeoutRef.current);
+  };
+
+  useHamburgerClose({
+    menuVisible,
+    setMenuVisible,
+    menuRef,
+    hamburgerButtonRef,
+    mouseOverMenu,
+    setMouseOverMenu,
+    timeoutRef,
+    menuTimeout,
+  });
+
+  // noinspection HtmlUnknownTarget
+  return (
+    <div
+      ref={menuRef}
+      className={`fixed right-0 top-0 ${
+        menuVisible ? "" : "translate-x-full"
+      } z-[9999] flex bg-teal-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
+      onMouseEnter={handleMouseEnterMenu}
+      onMouseLeave={handleMouseLeaveMenu}
+    >
+      <ul className="list-reset mt-16 p-5 text-white">
+        <li className="py-5">
+          <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">
+          <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">
+          <Link
+            href="/contactez-nous"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("contact")}
+          </Link>
+        </li>
+        <li className="py-5">
+          <ThemeSwitcher />
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default HamburgerMenu;