design sidebar & head layout & page dashboard

2024-09-10 02:00:41 +03:30
parent 60749d3b8c
commit dffdab7139
41 changed files with 1350 additions and 170 deletions
@@ -0,0 +1,47 @@
+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 /> }
+    ];
+
+    const [value, setValue] = useState(0);
+
+    return (
+        <ul className="flex flex-col gap-[32px] mt-[54px]">
+            {list.map((item, idx) => (
+                <li
+                    key={idx}
+                    className="p-[8px]"
+                >
+                    <Button
+                        fullWidth
+                        variant="text"
+                        onClick={() => setValue(idx)}
+                        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'}
+                        `}
+                    >
+
+                        <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
+                            {item.icon}
+                        </div>
+                        {item.name}
+                    </Button>
+                </li>
+            ))}
+        </ul>
+    )
+}
+
+export default Links