design dashboard comments & messages & modals

components/layout/sidebar/List.js

@@ -5,20 +5,17 @@ import MessageD from "@/components/icons/MessageD";
 import ProfileD from "@/components/icons/ProfileD";
 import NotificationD from "@/components/icons/NotificationD";
 import { Button } from "@mui/material";
-import { useState } from "react";
 
-const listMenu = [
-    { name: 'حساب کاربری', icon: <ProfileD /> },
-    { name: 'نوبت های من', icon: <CalndarD /> },
-    { name: 'تراکنش های من', icon: <CardD /> },
-    { name: 'نظرات من', icon: <MessageD /> },
-    { name: 'پیام ها', icon: <NotificationD /> },
-    { name: 'خروج', icon: <LogoutD /> },
-]
+function List({ value, setValue }) {
 
-function List() {
-
-    const [active, setActive] = useState(0);
+    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">
@@ -31,17 +28,17 @@ function List() {
                         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]
-                            ${active === idx ?
+                            ${value === idx ?
                                 'before:!bg-[#5559CE]' :
                                 'before:!bg-transparent'
                             }`}
-                        variant=""
+                        onClick={() => setValue(idx)}
                     >
                         {item.icon}
                         <p
                             className={`
                                 text-[16px] 
-                                ${active === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
+                                ${value === idx ? 'text-[#5559CE] font-bold' : 'text-[#7E7E7E] font-normal'}
                             `}
                         >{item.name}</p>
                     </Button>