owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-23 04:26:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

hamburger animation and menu transition

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
components/Hamburger.tsx
+15 -4
View File
@@ -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} />}
</>