hamburger menu transition

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

components/Hamburger.tsx

@@ -8,13 +8,15 @@ const Hamburger = () => {
   const [menuVisible, setMenuVisible] = useState(false);
   return (
     <>
-      {" "}
+      <div
-      <div className="space-y-2" onClick={() => setMenuVisible(!menuVisible)}>
+        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} />}
     </>
   );
 };

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">
+    <div
-      <ul className="list-reset text-white p-5">
+      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>

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