change layout and router panel & design page dashboard and user account

components/layoutPanel/sidebar/Links.js

@@ -1,20 +1,23 @@
+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";
-import { Button } from "@mui/material";
-import { useState } from "react";
 
 function Links() {
 
     const list = [
-        { name: 'دشبورد', icon: <CategoryP /> },
-        { name: 'حساب کاربری', icon: <ProfileCircleP /> },
-        { name: 'اضافه کردن پزشک', icon: <ProfileAddP /> },
-        { name: 'نوبت ها', icon: <CalendarP /> }
+        { name: 'دشبورد', src: '/panel/dashboard', icon: <CategoryP /> },
+        { name: 'حساب کاربری', src: '/panel/user-account', icon: <ProfileCircleP /> },
+        { name: 'اضافه کردن پزشک', src: '/', icon: <ProfileAddP /> },
+        { name: 'نوبت ها', src: '/', icon: <CalendarP /> }
     ];
 
-    const [value, setValue] = useState(0);
+    const pathname = usePathname();
 
     return (
         <ul className="flex flex-col gap-[32px] mt-[54px]">
@@ -23,21 +26,22 @@ function Links() {
                     key={idx}
                     className="p-[8px]"
                 >
-                    <Button
-                        fullWidth
-                        variant="text"
-                        onClick={() => setValue(idx)}
-                        className={`
+                    <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
-                            ${idx === value ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
-                        `}
-                    >
+                            ${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>
-                        {item.name}
-                    </Button>
+                            <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
+                                {item.icon}
+                            </div>
+                            {item.name}
+                        </Button>
+                    </Link>
                 </li>
             ))}
         </ul>