45 lines
1.6 KiB
JavaScript
45 lines
1.6 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
|
|
fixed h-screen w-full z-50 top-[80px] 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]"></span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default Menu |