hamburger animation and menu transition

TODO

@@ -1,4 +1,6 @@
-improve hamburger menu - button and menu <- menu hidden off page to the right and eases in, button needs animation
+font size on mobile screen
+
+cache-control header
 
 create readme
 

components/Hamburger.tsx

@@ -3,7 +3,6 @@
 import HamburgerMenu from "@/components/HamburgerMenu";
 import { useState } from "react";
 
-// TODO make hamburger menu slide in from the right instead of conditional rendering
 const Hamburger = () => {
   const [menuVisible, setMenuVisible] = useState(false);
   return (
@@ -12,9 +11,21 @@ const Hamburger = () => {
         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
-        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
+          className={`w-8 h-0.5 bg-gray-600 dark:bg-white transition-transform duration-300 ease-in-out ${
-        <div className="w-8 h-0.5 bg-gray-600 dark:bg-white"></div>
+            menuVisible ? "rotate-45 translate-y-2.5 translate-x-[1px]" : ""
+          }`}
+        ></div>
+        <div
+          className={`w-8 h-0.5 bg-gray-600 dark:bg-white transition-transform duration-300 ease-linear ${
+            menuVisible ? "opacity-0 rotate-0 scale-0" : ""
+          }`}
+        ></div>
+        <div
+          className={`w-8 h-0.5 bg-gray-600 dark:bg-white transition-transform duration-300 ease-in-out ${
+            menuVisible ? "-rotate-45 -translate-y-2.5" : ""
+          }`}
+        ></div>
       </div>
       {<HamburgerMenu menuVisible={menuVisible} />}
     </>

components/HamburgerMenu.tsx

@@ -4,9 +4,9 @@ import ThemeSwitcher from "@/components/ThemeSwitcher";
 const HamburgerMenu = ({ menuVisible }: { menuVisible: boolean }) => {
   return (
     <div
-      className={`absolute top-0 ${
+      className={`absolute top-0 -right-[173px] ${
-        menuVisible ? "right-0" : "-right-[173px]"
+        menuVisible ? "-translate-x-full" : ""
-      } z-[9999] bg-teal-600 flex md:hidden dark:bg-gray-600 transition-all duration-500 ease-linear`}
+      } z-[9999] bg-teal-600 flex md:hidden dark:bg-gray-600 transition-transform duration-500 ease-linear`}
     >
       <ul className="list-reset text-white mt-16 p-5">
         <li className="py-5">