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

components/layoutPanel/sidebar/BgGray.js

@@ -0,0 +1,13 @@
+function BgGray({ isActive, setIsActive }) {
+    return (
+        <div
+            onClick={() => setIsActive(false)}
+            className={`
+                md:hidden ${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
+                absolute z-[25] cursor-pointer transition-all duration-500 left-0 top-0 w-screen h-screen
+            `}
+        ></div>
+    )
+}
+
+export default BgGray

components/layoutPanel/sidebar/Links.js

@@ -29,16 +29,16 @@ function Links({ open }) {
                             variant="text"
                             className={`
                                 !p-[8px] !flex !items-center !justify-start !gap-[8px] !text-[16px] !rounded-[8px] !transition-all !duration-500
-                                ${item.src === pathname ? '!bg-[#5559CE] !text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
+                                ${item.src === pathname ? '!bg-[#5559CE]' : ''}
                             `}
                         >
-
                             <div className="p-[4px] bg-[#E5E9FF] rounded-[4px] w-fit">
                                 {item.icon}
                             </div>
                             <p className={`
                                 transition-all duration-500
                                 ${open ? 'opacity-100' : 'md:opacity-0'}
+                                ${item.src === pathname ? '!text-[#FAFAFA] !font-bold' : '!text-[#525252] !font-medium'}
                             `}>{item.name}</p>
                         </Button>
                     </Link>

components/layoutPanel/sidebar/index.js

@@ -1,34 +1,28 @@
-import { useState } from "react";
-
 import Links from "./Links";
 import HeadMd from "./HeadMd";
 import HeadSm from "./HeadSm";
 import { Button } from "@mui/material";
 import LogoutOrangeP from "@/components/icons/LogoutOrangeP";
 
-function Sidebar({ active, setActive }) {
-
-  const [open, setOpen] = useState(false);
-
+function Sidebar({ active, setActive, open, setOpen }) {
   return (
     <div className={`
-        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%] md:w-fit
+        transition-all duration-500 md:flex fixed md:relative z-30 w-[85%]
         ${active ? ' right-0' : 'right-[-85%]'}
-        ${open ? 'min-w-[243px]' : 'min-w-[96px]'}
+        ${open ? 'min-w-[243px] md:w-[243px]' : 'min-w-[96px] md:w-[96px]'}
     `}>
       <aside className={`
         relative h-screen overflow-hidden 
-        transition-all duration-500 w-[85%] md:w-fit
+        transition-all duration-500 w-[85%]
         ${active ? ' right-0' : 'right-[-85%]'}
         ${open ? 'w-[243px]' : 'w-[96px]'}
       `}>
         <div className={`
-           z-30
-          md:top-0 md:right-0 w-[85%] md:w-fit
+           z-30 md:top-0 md:right-0 w-[85%]
         ${active ? ' right-0' : 'right-[-85%]'}
           overflow-hidden p-[24px] h-full flex flex-col justify-between items-start fixed 
           border-0 border-l border-l-[#EFEFEF] bg-[#FFF]
-          transition-all duration-700
+          transition-all duration-500
           ${open ? 'md:w-[243px]' : 'md:w-[96px]'}
         `}>
           <div className="w-full">