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

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]">