47 lines
1.8 KiB
JavaScript
47 lines
1.8 KiB
JavaScript
import { listNav } from "@/constans";
|
|
import { Button } from "@mui/material";
|
|
import Link from "next/link";
|
|
import { isActiveURL } from "@/helper";
|
|
|
|
function Col({ isActive, setIsActive, name }) {
|
|
return (
|
|
<div className="flex lg:hidden">
|
|
{/* <Button variant="text" className="!p-0.5">
|
|
<MenuHead />
|
|
</Button> */}
|
|
|
|
<div className={`
|
|
fixed pb-[31px] pt-[64px] pl-[24px] padding-responsive top-[-12px] sm:top-[-21px]
|
|
md:top-[-30px] lg:top-[-40px] w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500
|
|
${isActive ? 'right-0' : '-right-[85%]'}
|
|
`}>
|
|
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[38px]">
|
|
{listNav.map(nav => (
|
|
<li
|
|
key={nav.id}
|
|
className="w-full"
|
|
>
|
|
<Link
|
|
href={nav.link}
|
|
className="w-full"
|
|
>
|
|
<Button className={`
|
|
!h-10
|
|
${isActiveURL(nav.link.replace('/', ''), name) ?
|
|
'!text-[#526CAC] !bg-[rgba(199,_206,_244,_0.30)]' :
|
|
'!text-[#525252]'
|
|
}
|
|
!text-[16px] !w-full !flex !justify-start !font-medium !py-2.5 !px-4
|
|
`}>
|
|
{nav.name}
|
|
</Button>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Col |