46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
import { listNav } from "@/constans";
|
|
import { Button } from "@mui/material";
|
|
import Link from "next/link";
|
|
import { isActiveURL } from "@/helper";
|
|
|
|
function Col({ isActive, name }) {
|
|
return (
|
|
<div className="flex lg:hidden">
|
|
<div
|
|
className={`
|
|
fixed pb-[31px] pt-[64px] pl-[24px] padding-responsive top-0
|
|
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;
|