hamed
12d2e2e3f1
fix(progress): enhance accessibility by adding aria-label to LinearProgress component fix(share): add aria-label for better accessibility in Share button fix(title): change h3 to h2 for semantic correctness and add aria-labels for links fix(qrimg): add alt text for QR code image for improved accessibility fix(buttonmenu): add aria-label for mobile menu button to enhance accessibility
38 lines
1.2 KiB
JavaScript
38 lines
1.2 KiB
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;
|