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} />}
</>
components/HamburgerMenu.tsx
+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">