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

app/panel/(layout)/dashboard/page.js

@@ -1,3 +1,5 @@
+'use client';
+
 import DashboardPage from "@/components/panel/dashboard";
 import Information from '@/data/information.json';
 

app/panel/(layout)/layout.js

@@ -1,24 +1,46 @@
 'use client';
 
+import { useEffect, useState } from "react";
 import Header from "@/components/layoutPanel/header";
 import Sidebar from "@/components/layoutPanel/sidebar";
 import Information from '@/data/information.json';
 import UserDetail from "@/components/layoutPanel/userDetail";
 import { usePathname } from "next/navigation";
-import { useState } from "react";
+import BgGray from "@/components/layoutPanel/sidebar/BgGray";
 
 function LayoutPanel({ children }) {
 
     const pathname = usePathname();
     const [active, setActive] = useState(false);
+    const [open, setOpen] = useState(false);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 2000);
+    }, []);
+
 
     return (
         <div className="flex min-h-screen">
             <Sidebar
+                open={open}
                 active={active}
+                setOpen={setOpen}
                 setActive={setActive}
             />
-            <main className="w-full">
+            <BgGray isActive={active} setIsActive={setActive} />
+            <main className={`
+                w-full transition-all duration-500
+                ${pathname.includes('dashboard') ?
+                    (open ?
+                        'md:min-w-[calc(100%_-_243px)] md:w-[calc(100%_-_243px)] xl:min-w-[calc(100%_-_243px_-_332px)] xl:w-[calc(100%_-_243px_-_332px)]' :
+                        'md:min-w-[calc(100%_-_96px)] md:w-[calc(100%_-_96px)] xl:min-w-[calc(100%_-_96px_-_332px)] xl:w-[calc(100%_-_96px_-_332px)]'
+                    ) : (open ?
+                        'md:w-[calc(100%-243px)]' :
+                        'md:w-[calc(100%-96px)]')}
+            `}>
                 <Header
                     data={Information}
                     setActive={setActive}
@@ -29,7 +51,7 @@ function LayoutPanel({ children }) {
                 </section>
             </main>
             {pathname.includes('dashboard') && (
-                <UserDetail data={Information} />
+                <UserDetail data={Information} loading={loading} />
             )}
         </div>
     )