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

Improve mobile burger menu

Browse Source
This commit is contained in:
Timothy Armes
2023-07-20 17:16:55 +02:00
parent 66a4a03c6a
commit 81c5f0e0e1
4 changed files with 40 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[lang]/components/Hamburger.tsx
+16 -10
View File
@@ -1,7 +1,9 @@
"use client";
import HamburgerMenu from "./HamburgerMenu";
import { useRef, useState } from "react";
import { twMerge } from "tailwind-merge";
import HamburgerMenu from "./HamburgerMenu";
const Hamburger = () => {
const [menuVisible, setMenuVisible] = useState(false);
@@ -15,19 +17,23 @@ const Hamburger = () => {
onClick={() => setMenuVisible(!menuVisible)}
>
<div
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
menuVisible ? "translate-x-[1px] translate-y-2.5 rotate-45" : ""
}`}
className={twMerge(
"h-0.5 w-8 bg-gray-600 transition-all duration-300 ease-in-out dark:bg-white",
menuVisible &&
"translate-x-[1px] translate-y-2.5 rotate-45 bg-white",
)}
></div>
<div
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white ${
menuVisible ? "rotate-0 scale-0 opacity-0" : ""
}`}
className={twMerge(
"h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-linear dark:bg-white",
menuVisible && "scale-0 bg-white opacity-0",
)}
></div>
<div
className={`h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white ${
menuVisible ? "-translate-y-2.5 -rotate-45" : ""
}`}
className={twMerge(
"h-0.5 w-8 bg-gray-600 transition-transform duration-300 ease-in-out dark:bg-white",
menuVisible && "-translate-y-2.5 -rotate-45 bg-white",
)}
></div>
</div>