From 6e1f40848632627492d169ce4e4224a3cc687056 Mon Sep 17 00:00:00 2001
From: Owen Rees <owenrees82@gmail.com>
Date: Fri, 16 Jun 2023 09:50:32 +0200
Subject: [PATCH] hamburger animation and menu transition

---
 TODO                         |  4 +++-
 components/Hamburger.tsx     | 19 +++++++++++++++----
 components/HamburgerMenu.tsx |  6 +++---
 3 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/TODO b/TODO
index c007447..285cdf9 100644
--- a/TODO
+++ b/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
 
diff --git a/components/Hamburger.tsx b/components/Hamburger.tsx
index 42ff76d..aaef91a 100644
--- a/components/Hamburger.tsx
+++ b/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 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 transition-transform duration-300 ease-in-out ${
+            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} />}
     </>
diff --git a/components/HamburgerMenu.tsx b/components/HamburgerMenu.tsx
index 275e094..28870a9 100644
--- a/components/HamburgerMenu.tsx
+++ b/components/HamburgerMenu.tsx
@@ -4,9 +4,9 @@ import ThemeSwitcher from "@/components/ThemeSwitcher";
 const HamburgerMenu = ({ menuVisible }: { menuVisible: boolean }) => {
   return (
     <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`}
+      className={`absolute top-0 -right-[173px] ${
+        menuVisible ? "-translate-x-full" : ""
+      } 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">