51 lines
2.0 KiB
JavaScript
51 lines
2.0 KiB
JavaScript
import Link from "next/link";
|
|
import { Button } from "@mui/material";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
// Icons
|
|
import CalendarP from "@/components/icons/CalendarP";
|
|
import CategoryP from "@/components/icons/CategoryP";
|
|
import ProfileAddP from "@/components/icons/ProfileAddP";
|
|
import ProfileCircleP from "@/components/icons/ProfileCircleP";
|
|
|
|
function Links({ open }) {
|
|
|
|
const list = [
|
|
{ name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
|
|
{ name: 'حساب کاربری', src: '/panel/user-account', icon: <ProfileCircleP /> },
|
|
{ name: 'اضافه کردن پزشک', src: '/panel/add-doctor', icon: <ProfileAddP /> },
|
|
{ name: 'نوبت ها', src: '/panel/turns', icon: <CalendarP /> }
|
|
];
|
|
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<ul className={`flex flex-col gap-[32px] mt-[36px] md:mt-[54px] transition-all duration-500`}>
|
|
{list.map((item, idx) => (
|
|
<li key={idx}>
|
|
<Link href={item.src}>
|
|
<Button
|
|
fullWidth
|
|
variant="text"
|
|
className={`
|
|
!p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
|
|
${item.src === pathname ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
|
|
`}
|
|
>
|
|
|
|
<div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
|
|
{item.icon}
|
|
</div>
|
|
<p className={`
|
|
transition-all duration-500
|
|
${open ? 'opacity-100' : 'md:opacity-0'}
|
|
`}>{item.name}</p>
|
|
</Button>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default Links |