New front page design

2026-07-23 04:26:57 +00:00 · 2024-03-01 09:20:14 +01:00
parent 1c271cda05
commit cc0ae71c26
36 changed files with 224 additions and 52 deletions
@@ -0,0 +1,57 @@
+import { useAtom } from "jotai";
+import { useTranslations } from "next-intl";
+import { twMerge } from "tailwind-merge";
+
+import { burgerMenuIsOpenAtom } from "@/atoms";
+import { Link } from "@/utils/navigation";
+
+const HamburgerMenu = () => {
+  const t = useTranslations("Nav");
+  const [burgerMenuIsOpen, setBurgerMenuIsOpen] = useAtom(burgerMenuIsOpenAtom);
+
+  const closeMenu = () => setBurgerMenuIsOpen(false);
+
+  return (
+    <div
+      className={twMerge(
+        "fixed right-0 top-0 z-[9999] h-[calc(100svh-3rem)] w-full",
+        "flex items-center justify-center bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden",
+        !burgerMenuIsOpen && "translate-x-full",
+      )}
+    >
+      <ul className="list-reset text-white">
+        <li className="py-5 text-center text-xl">
+          <Link
+            onClick={closeMenu}
+            href="/tournaments"
+            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
+            onClick={closeMenu}
+            href="/clubs"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("clubs")}
+          </Link>
+        </li>
+
+        <li className="py-5 text-center text-xl">
+          <Link
+            onClick={closeMenu}
+            href="/elo"
+            className="border-b-2 border-transparent transition-all duration-300 ease-in-out hover:border-white"
+          >
+            {t("elo")}
+          </Link>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default HamburgerMenu;