24 lines
973 B
JavaScript
24 lines
973 B
JavaScript
import { Button } from "@mui/material";
|
|
|
|
function ButtonMenu({ isActive, setIsActive }) {
|
|
return (
|
|
<Button
|
|
onClick={() => setIsActive(!isActive)}
|
|
aria-label="منوی موبایل"
|
|
className="!py-[6px] !px-[2px] !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-[8px]" : "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-[-8px]" : "rotate-0 w-full" } `}
|
|
></span>
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
export default ButtonMenu;
|