change element component & add menu head & responsive head home

2024-08-10 03:23:34 +03:30
parent 01de360360
commit 0afe0a39b0
14 changed files with 243 additions and 69 deletions
@@ -0,0 +1,28 @@
+import { Button } from "@mui/material"
+
+function ButtonMenu({ isActive, setIsActive }) {
+    return (
+        <Button
+            onClick={() => setIsActive(!isActive)}
+            className="!flex !p-0.5 !w-[24px] !h-[24px] !flex-col !justify-between !items-center"
+        >
+            <span
+                className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+                    ${isActive ? 'rotate-45 w-1/2 translate-x-[60%] translate-y-[6px]' : 'rotate-0 w-full'}
+                `}
+            ></span>
+            <span
+                className={`w-full min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+                    ${isActive && 'rotate-180'}
+                `}
+            ></span>
+            <span
+                className={`min-h-[2px] transition-all duration-500 ease-in-out rounded-[40px] bg-[#6C757D] 
+                    ${isActive ? '-rotate-45 w-1/2 translate-x-[60%] translate-y-[-6px]' : 'rotate-0 w-full'}
+                `}
+            ></span>
+        </Button>
+    )
+}
+
+export default ButtonMenu