73 lines
2.3 KiB
JavaScript
73 lines
2.3 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] dark:!bg-[#1F1D2B] dark-active-icon"
|
|
: " dark-deactive-icon"
|
|
}
|
|
`}
|
|
>
|
|
<div className="p-[3px] bg-[#E5E9FF] dark:bg-transparent rounded-[4px] w-fit">
|
|
<div className="w-[20px] h-[20px]">{item.icon}</div>
|
|
</div>
|
|
<p
|
|
className={`
|
|
transition-all duration-500 text-sidebar
|
|
${open ? "opacity-100" : "md:opacity-0"}
|
|
${
|
|
item.src === pathname
|
|
? "!text-[#FAFAFA] dark:!text-[#5559CE] !font-bold"
|
|
: "!text-[#525252] dark:!text-[#A1A1A1] !font-medium"
|
|
}
|
|
`}
|
|
>
|
|
{item.name}
|
|
</p>
|
|
</Button>
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
);
|
|
}
|
|
|
|
export default Links;
|