fix responsive all page & add modal doctor id & page dashboard aside

2024-09-01 01:36:36 +03:30
parent b058066380
commit 680ef74034
64 changed files with 682 additions and 155 deletions
@@ -0,0 +1,20 @@
+import Image from "next/image"
+
+function Head({ user }) {
+    return (
+        <div
+            className="w-full flex flex-col items-center justify-start gap-[4px]"
+        >
+            <Image
+                src={user.profile}
+                alt="profile"
+                height={73}
+                width={73}
+            />
+            <p className="text-[#3B3B3B] text-[14px] font-bold">{user.name}</p>
+            <p className="text-[#7E7E7E] text-[14px] font-normal">{user.phone}</p>
+        </div>
+    )
+}
+
+export default Head
@@ -0,0 +1,57 @@
+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";
+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() {
+
+    const [active, setActive] = useState(0);
+
+    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]
+                            ${active === idx ?
+                                'before:!bg-[#5559CE]' :
+                                'before:!bg-transparent'
+                            }`}
+                        variant=""
+                    >
+                        {item.icon}
+                        <p
+                            className={`
+                                text-[16px] 
+                                ${active === 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
@@ -0,0 +1,16 @@
+import Head from "./Head"
+import List from "./List"
+
+function Sidebar({ user }) {
+    return (
+        <aside
+            className="pt-[10px] pb-[26px] bg-[#FFF] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] rounded-[8px] 
+            min-w-[288px]"
+        >
+            <Head user={user} />
+            <List user={user} />
+        </aside>
+    )
+}
+
+export default Sidebar