46 lines
1.4 KiB
JavaScript
46 lines
1.4 KiB
JavaScript
import ArrowLeftPH from "@/components/icons/ArrowLeftPH";
|
|
import { Button } from "@mui/material";
|
|
|
|
function Menu({ value, open, setOpen, listTab, handleChange }) {
|
|
return (
|
|
<ul
|
|
className={`
|
|
flex bg-[#FAFAFA] flex-col justify-start items-start dark:bg-[#222433]
|
|
fixed h-screen w-full z-50 top-[60px] pt-[20px] transition-all duration-500
|
|
${open ? "right-0" : "-right-full"}
|
|
`}
|
|
>
|
|
{listTab.map((item, idx) => (
|
|
<li key={idx} className="w-[calc(100%-32px)] mx-[16px]">
|
|
<Button
|
|
onClick={() => {
|
|
handleChange(_, idx);
|
|
setOpen(false);
|
|
}}
|
|
className="!flex !p-2 !items-center !justify-between !w-full"
|
|
>
|
|
<p
|
|
className={`
|
|
text-[16px] transition-all duration-500
|
|
${
|
|
value === idx
|
|
? "text-[#5559CE] font-bold"
|
|
: "text-[#7E7E7E] font-normal"
|
|
}
|
|
`}
|
|
>
|
|
{item}
|
|
</p>
|
|
<ArrowLeftPH active={value === idx} />
|
|
</Button>
|
|
{listTab.length > idx + 1 && (
|
|
<span className="my-[12px] block h-px w-full bg-[#EFEFEF] dark:bg-[#343645]"></span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default Menu;
|