54 lines
2.3 KiB
JavaScript
54 lines
2.3 KiB
JavaScript
import CardD from "@/components/icons/CardD";
|
|
import LogoutD from "@/components/icons/LogoutD";
|
|
import CalndarD from "@/components/icons/CalndarD";
|
|
import MessageD from "@/components/icons/MessageD";
|
|
import ProfileD from "@/components/icons/ProfileD";
|
|
import NotificationD from "@/components/icons/NotificationD";
|
|
import { Button } from "@mui/material";
|
|
|
|
function List({ value, setValue }) {
|
|
|
|
const listMenu = [
|
|
{ name: 'حساب کاربری', icon: <ProfileD active={value === 0} /> },
|
|
{ name: 'نوبت های من', icon: <CalndarD active={value === 1} /> },
|
|
{ name: 'تراکنش های من', icon: <CardD active={value === 2} /> },
|
|
{ name: 'نظرات من', icon: <MessageD active={value === 3} /> },
|
|
{ name: 'پیام ها', icon: <NotificationD active={value === 4} /> },
|
|
{ name: 'خروج', icon: <LogoutD active={value === 5} /> },
|
|
];
|
|
|
|
return (
|
|
<ul className="flex flex-col items-start justify-start w-full">
|
|
{listMenu.map((item, idx) => (
|
|
<li
|
|
className="w-full"
|
|
key={idx}
|
|
>
|
|
<Button
|
|
className={`!flex !py-[24px] hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
|
|
!items-center !justify-start !gap-[8px] !relative before:!absolute before:!right-0
|
|
before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
|
|
${value === idx ?
|
|
'before:!bg-[#5559CE]' :
|
|
'before:!bg-transparent'
|
|
}`}
|
|
onClick={() => setValue(idx)}
|
|
>
|
|
{item.icon}
|
|
<p
|
|
className={`
|
|
text-[16px]
|
|
${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
|
|
`}
|
|
>{item.name}</p>
|
|
</Button>
|
|
{listMenu.length > idx + 1 && (
|
|
<span className="block bg-[#EFEFEF] h-px w-full"></span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)
|
|
}
|
|
|
|
export default List |