fix: connect header and layout user info to api, fix setting api and lazy load

src/components/Layout/Layout.tsx

@@ -6,6 +6,8 @@ import { Box, useMediaQuery, useTheme } from '@mui/material';
 import { Header } from './Header';
 import { useState } from 'react';
 import { Toolbar } from './Toolbar';
+import { useApi } from '@/hooks/useApi';
+import { fetchProfile } from '@/features/profile/api/settingsApi';
 import type { User } from './type';
 
 export const Layout = () => {
@@ -14,11 +16,7 @@ export const Layout = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const [sideNavOpen, setSideNavOpen] = useState(false);
-  const [user] = useState<User>({
-    firstName: 'محمد حسین',
-    lastName: 'برزه گر',
-    phoneNumber: '09123456789',
-  });
+  const { data, loading } = useApi(fetchProfile, { immediate: true });
 
   return (
     <Box
@@ -46,16 +44,48 @@ export const Layout = () => {
             isMobile={isMobile}
             sideNavOpen={sideNavOpen}
             setSideNavOpen={setSideNavOpen}
-            user={user}
+            loading={loading}
+            user={{
+              firstName: data?.firstName || '',
+              lastName: data?.lastName || '',
+              phoneNumber: data?.phoneNumber || '',
+              profileUrl: data?.profileImageUrl,
+            }}
           />
-          <Outlet />
+          <Box sx={{ flex: 1, overflowY: 'auto' }}>
+            <Outlet />
+          </Box>
         </Box>
 
         <SideNav
           open={sideNavOpen}
           onClose={() => setSideNavOpen(false)}
-          header={isMobile ? undefined : <Header user={user} />}
-          footer={isMobile ? <Header user={user} /> : undefined}
+          header={
+            isMobile ? undefined : (
+              <Header
+                loading={loading}
+                user={{
+                  firstName: data?.firstName || '',
+                  lastName: data?.lastName || '',
+                  phoneNumber: data?.phoneNumber || '',
+                  profileUrl: data?.profileImageUrl,
+                }}
+              />
+            )
+          }
+          footer={
+            isMobile ? (
+              <Header
+                loading={loading}
+                user={{
+                  firstName: data?.firstName || '',
+                  lastName: data?.lastName || '',
+                  phoneNumber: data?.phoneNumber || '',
+                  profileUrl: data?.profileImageUrl,
+                }}
+              />
+            ) : undefined
+          }
           navConfig={navItemConfigs}
           activePath={location.pathname + location.hash}
           selectedVariant="textOnly"