From 81c5f0e0e15b8769b52e8e414b8c19ac30b763c0 Mon Sep 17 00:00:00 2001
From: Timothy Armes <tim@timothyarmes.com>
Date: Thu, 20 Jul 2023 17:16:55 +0200
Subject: [PATCH] Improve mobile burger menu

---
 .vscode/settings.json                   |  1 +
 app/[lang]/components/Hamburger.tsx     | 26 +++++++++++++++---------
 app/[lang]/components/HamburgerMenu.tsx | 17 +++++++++-------
 app/[lang]/components/Navbar.tsx        | 27 ++++++++++++-------------
 4 files changed, 40 insertions(+), 31 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 799580a..7e439e4 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,7 @@
 {
   "cSpell.words": [
     "approximative",
+    "Armes",
     "colour",
     "colours",
     "contactez",
diff --git a/app/[lang]/components/Hamburger.tsx b/app/[lang]/components/Hamburger.tsx
index 09df03c..b509c95 100644
--- a/app/[lang]/components/Hamburger.tsx
+++ b/app/[lang]/components/Hamburger.tsx
@@ -1,7 +1,9 @@
 "use client";
 
-import HamburgerMenu from "./HamburgerMenu";
 import { useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
+
+import HamburgerMenu from "./HamburgerMenu";
 
 const Hamburger = () => {
   const [menuVisible, setMenuVisible] = useState(false);
@@ -15,19 +17,23 @@ const Hamburger = () => {
         onClick={() => setMenuVisible(!menuVisible)}
       >
         <div
-          className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
-            menuVisible ? "translate-x-[1px] translate-y-2.5 rotate-45" : ""
-          }`}
+          className={twMerge(
+            "h-0.5 w-8 bg-gray-600 transition-all duration-300 ease-in-out dark:bg-white",
+            menuVisible &&
+              "translate-x-[1px] translate-y-2.5 rotate-45 bg-white",
+          )}
         ></div>
         <div
-          className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white ${
-            menuVisible ? "rotate-0 scale-0 opacity-0" : ""
-          }`}
+          className={twMerge(
+            "h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white",
+            menuVisible && "scale-0 bg-white opacity-0",
+          )}
         ></div>
         <div
-          className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
-            menuVisible ? "-translate-y-2.5 -rotate-45" : ""
-          }`}
+          className={twMerge(
+            "h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white",
+            menuVisible && "-translate-y-2.5 -rotate-45 bg-white",
+          )}
         ></div>
       </div>
 
diff --git a/app/[lang]/components/HamburgerMenu.tsx b/app/[lang]/components/HamburgerMenu.tsx
index 2892e16..4b1077f 100644
--- a/app/[lang]/components/HamburgerMenu.tsx
+++ b/app/[lang]/components/HamburgerMenu.tsx
@@ -5,6 +5,7 @@ interface HamburgerMenuState {
 }
 
 import { Dispatch, RefObject, SetStateAction, useRef, useState } from "react";
+import { twMerge } from "tailwind-merge";
 import Link from "next-intl/link";
 import { useTranslations } from "next-intl";
 
@@ -51,14 +52,16 @@ const HamburgerMenu = ({
   return (
     <div
       ref={menuRef}
-      className={`fixed right-0 top-0 ${
-        menuVisible ? "" : "translate-x-full"
-      } z-[9999] flex bg-primary-600 transition-transform duration-200 ease-linear dark:bg-gray-600 md:hidden`}
+      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 mt-16 p-5 text-white">
-        <li className="py-5">
+      <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"
@@ -66,7 +69,7 @@ const HamburgerMenu = ({
             {t("tournaments")}
           </Link>
         </li>
-        <li className="py-5">
+        <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"
@@ -74,7 +77,7 @@ const HamburgerMenu = ({
             {t("about")}
           </Link>
         </li>
-        <li className="py-5">
+        <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"
diff --git a/app/[lang]/components/Navbar.tsx b/app/[lang]/components/Navbar.tsx
index 0551623..4b1744e 100644
--- a/app/[lang]/components/Navbar.tsx
+++ b/app/[lang]/components/Navbar.tsx
@@ -17,18 +17,17 @@ export default function Navbar() {
       className="relative mt-0 h-16 w-full overflow-x-clip border-b-[1px] bg-white px-5 dark:border-gray-700 dark:bg-gray-800"
       data-test="navbar"
     >
-      <div className="container mx-auto flex h-full items-center">
-        <div className="flex w-full justify-center font-extrabold md:w-1/2 md:justify-start">
-          <Link
-            className="text-gray-900 no-underline hover:no-underline dark:text-white"
-            href="/"
-          >
-            <span className="font-title text-2xl text-gray-800 dark:text-white">
-              {t("title")}
-            </span>
-          </Link>
-        </div>
-        <div className="pb-2 md:hidden" data-test="mobile-menu">
+      <div className="container mx-auto flex h-full items-center justify-between">
+        <Link
+          className="font-extrabold text-gray-900 no-underline hover:no-underline dark:text-white"
+          href="/"
+        >
+          <span className="font-title text-2xl text-gray-800 dark:text-white">
+            {t("title")}
+          </span>
+        </Link>
+
+        <div className="md:hidden" data-test="mobile-menu">
           <Hamburger />
         </div>
 
@@ -36,9 +35,9 @@ export default function Navbar() {
           className="hidden h-full justify-center md:flex md:w-1/2 md:justify-end"
           data-test="desktop-menu"
         >
-          <ul className="list-reset flex h-full flex-1 items-center justify-around text-gray-900 no-underline dark:text-white md:flex-none">
+          <ul className="list-reset flex h-full flex-1 items-center gap-14 text-gray-900 no-underline dark:text-white md:flex-none">
             {links.map(({ title, route }) => (
-              <li key={route} className="mr-10 h-full">
+              <li key={route} className="h-full">
                 <Link
                   className="inline-flex h-full items-center border-b-4 border-t-4 border-transparent transition-all duration-300 ease-in-out hover:border-b-primary-600"
                   href={route}