hamburger animation and menu transition

This commit is contained in:
Owen Rees
2023-06-16 09:50:32 +02:00
parent 9a3910e3d7
commit 6e1f408486
3 changed files with 21 additions and 8 deletions
+3 -3
View File
@@ -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">