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

components/layout/header/index.js

@@ -16,7 +16,7 @@ function Header({ name }) {
 
     return (
         <div
-            className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
+            className="bg-[#FFF] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
         >
             <div className={`
                 px-[8px] sm:px-[16px] md:px-[24px] lg:px-[32px] py-[4px] sm:py-[8px] md:py-[12px] lg:py-[16px] flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap

components/layout/index.js

@@ -7,8 +7,9 @@ import Header from './header';
 import Aos from "aos";
 import "aos/dist/aos.css";
 import { useEffect } from "react";
+import Sidebar from './sidebar';
 
-function Layout({ children, title, name, disableFooter }) {
+function Layout({ children, title, name, disableFooter, isSidebar, user }) {
 
     useEffect(() => {
         Aos.init({ duration: 1000 });
@@ -20,7 +21,17 @@ function Layout({ children, title, name, disableFooter }) {
                 <header className="w-full fixed top-[12px] sm:top-[21px] md:top-[30px] lg:top-[40px] right-1/2 translate-x-1/2 padding-responsive z-[10]">
                     <Header name={name} />
                 </header>
-                <section className='opacity-page'>
+                <section className={`
+                    opacity-page
+                    ${isSidebar &&
+                    'padding-responsive min-h-screen pt-[120px] flex items-start justify-center gap-[24px] mt-[56px]'
+                    }
+                `}>
+                    {isSidebar && (
+                        <Sidebar
+                            user={user}
+                        />
+                    )}
                     {children}
                 </section>
             </main>

components/layout/sidebar/Head.js

@@ -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

components/layout/sidebar/List.js

@@ -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

components/layout/sidebar/index.js

@@ -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