From 9a3910e3d7b867ca85c39dd92f91517f35495621 Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Thu, 15 Jun 2023 23:15:05 +0200
Subject: [PATCH] hamburger menu transition

---
 TODO                         |  2 --
 components/Hamburger.tsx     |  8 +++++---
 components/HamburgerMenu.tsx | 10 +++++++---
 components/Navbar.tsx        |  2 +-
 4 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/TODO b/TODO
index 9d95675..c007447 100644
--- a/TODO
+++ b/TODO
@@ -2,8 +2,6 @@ improve hamburger menu - button and menu <- menu hidden off page to the right an
 
 create readme
 
-consider moving themetoggle css out of global and into its own css file
-
 need a 'return to top' arrow button on smaller screens
 
 mobile map needs improving
diff --git a/components/Hamburger.tsx b/components/Hamburger.tsx
index 36f3c9c..42ff76d 100644
--- a/components/Hamburger.tsx
+++ b/components/Hamburger.tsx
@@ -8,13 +8,15 @@ const Hamburger = () => {
   const [menuVisible, setMenuVisible] = useState(false);
   return (
     <>
-      {" "}
-      <div className="space-y-2" onClick={() => setMenuVisible(!menuVisible)}>
+      <div
+        className="space-y-2 relative z-[99999]"
+        onClick={() => setMenuVisible(!menuVisible)}
+      >
         <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
         <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
         <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
       </div>
-      {menuVisible && <HamburgerMenu />}
+      {<HamburgerMenu menuVisible={menuVisible} />}
     </>
   );
 };
diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx
index 00b5df3..275e094 100644
--- a/components/HamburgerMenu.tsx
+++ b/components/HamburgerMenu.tsx
@@ -1,10 +1,14 @@
 import Link from "next/link";
 import ThemeSwitcher from "@/components/ThemeSwitcher";
 
-const HamburgerMenu = () => {
+const HamburgerMenu = ({ menuVisible }: { menuVisible: boolean }) => {
   return (
-    <div className="hamburgerMenu absolute top-16 right-0 z-[9999] bg-teal-600 flex md:hidden dark:bg-gray-600">
-      <ul className="list-reset text-white p-5">
+    <div
+      className={`absolute top-0 ${
+        menuVisible ? "right-0" : "-right-[173px]"
+      } z-[9999] bg-teal-600 flex md:hidden dark:bg-gray-600 transition-all duration-500 ease-linear`}
+    >
+      <ul className="list-reset text-white mt-16 p-5">
         <li className="py-5">
           <Link href="/tournois">Tournois</Link>
         </li>
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index fc714cb..c58e934 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -4,7 +4,7 @@ import Hamburger from "@/components/Hamburger";
 
 export default function Navbar() {
   return (
-    <nav className="w-full relative border-b-[1px] pt-5 mt-0 px-5 md:pt-2 bg-white dark:bg-gray-800 dark:border-gray-700">
+    <nav className="w-full relative border-b-[1px] pt-5 mt-0 px-5 md:pt-2 bg-white dark:bg-gray-800 dark:border-gray-700 overflow-x-clip">
       <div className="container mx-auto flex items-center">
         <div className="pb-3 justify-center flex w-full md:w-1/2 md:pb-0 md:justify-start font-extrabold">
           <Link