responsive page user-account & add-doctor & turns & add loading to all page panel & change design page dashboard

components/layout/header/list/col/index.js

@@ -9,7 +9,6 @@ function Col({ isActive, setIsActive, name }) {
             {/* <Button variant="text" className="!p-0.5">
                 <MenuHead />
             </Button> */}
-
             <div className={`
             fixed pb-[31px] pt-[64px] pl-[24px]  padding-responsive top-[-12px] sm:top-[-21px] 
             md:top-[-30px] lg:top-[-40px] w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500

components/layout/sidebar/List.js

@@ -6,6 +6,8 @@ import ProfileD from "@/components/icons/ProfileD";
 import NotificationD from "@/components/icons/NotificationD";
 import { Button } from "@mui/material";
 import ArrowLeftSideBar from "@/components/icons/ArrowLeftSideBar";
+import { useState } from "react";
+import ModalLogout from "./ModalLogout";
 
 function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSide }) {
 
@@ -18,8 +20,16 @@ function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSid
         { name: 'خروج', icon: <LogoutD active={value === 5} /> },
     ];
 
+    const [open, setOpen] = useState(false);
+    const handleOpen = () => setOpen(true);
+    const handleClose = () => setOpen(false);
+
     return (
         <ul className="flex flex-col items-start justify-start w-full">
+            <ModalLogout
+                open={open}
+                handleClose={handleClose}
+            />
             {listMenu.map((item, idx) => (
                 <li
                     className="w-full"
@@ -27,6 +37,7 @@ function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSid
                 >
                     <Button
                         className={`!py-[16px] sm:!py-[18px] md:!py-[20px] !px-1 hover:!bg-transparent !rounded-none !w-full before:!rounded-[100px]
+                            transition-all duration-300 before:transition-all before:duration-300
                             !relative before:!absolute before:!right-0 !flex !justify-between !items-center
                             before:!top-1/2 before:!-translate-y-1/2 before:!h-[40px] before:!w-[2px]
                             ${value === idx ?
@@ -34,9 +45,12 @@ function List({ value, setValue, isTurnsDetails, setIsTurnsDetails, setIsOpenSid
                                 'before:!bg-transparent'
                             }`}
                         onClick={() => {
-                            setValue(idx);
                             setIsOpenSide(false);
                             !isTurnsDetails && setIsTurnsDetails(false);
+                            if (idx === 5)
+                                handleOpen()
+                            else
+                                setValue(idx);
                         }}
                     >
                         <div className="!flex !w-full !items-center !justify-start !gap-[8px] md:px-[24px]">

components/layout/sidebar/ModalLogout.js

@@ -0,0 +1,48 @@
+import { styleDefault } from '@/mui';
+import { Box, Button, Modal } from '@mui/material';
+import CloseModalD from '@/components/icons/CloseModalD';
+
+function ModalLogout({ open, handleClose }) {
+    return (
+        <Modal
+            open={open}
+            onClose={handleClose}
+        >
+            <Box
+                sx={styleDefault}
+                className="!w-fit !min-w-[328px] md:!w-fit md:!min-w-[552px] !py-[20px] !px-[24px]"
+            >
+                <div className='flex items-center justify-between w-full'>
+                    <p className='text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium'>خروج</p>
+                    <Button
+                        onClick={handleClose}
+                        className='!p-1'
+                        variant='text'
+                    >
+                        <CloseModalD />
+                    </Button>
+                </div>
+                <span className='block h-px w-full bg-[#EFEFEF] my-[12px] md:my-[14px] lg:my-[16px]'></span>
+                <p className='text-[#525252] text-[12px] md:text-[14px] lg:text-[16px] font-normal'>آیا مطمئن هستید که می‌خواهید از حساب کاربری خود خارج شوید؟</p>
+                <div className='flex items-center justify-end gap-[16px] mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
+                    <Button
+                        variant='outlined'
+                        onClick={handleClose}
+                        className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !rounded-[4px] !border-[#828DE0] !text-[#828DE0] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
+                    >
+                        انصراف
+                    </Button>
+                    <Button
+                        variant='contained'
+                        onClick={handleClose}
+                        className='!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[10px] md:!px-[14px] lg:!px-[18px] !rounded-[4px] !text-[#EFEFEF] !text-[12px] md:!text-[14px] lg:!text-[16px] !font-medium'
+                    >
+                        خروج
+                    </Button>
+                </div>
+            </Box>
+        </Modal>
+    )
+}
+
+export default ModalLogout