100 lines
3.0 KiB
TypeScript
100 lines
3.0 KiB
TypeScript
import { SideNav } from '@rkheftan/harmony-ui';
|
|
import { buildNavItems } from './buildNavItems';
|
|
import { appRoutes } from '@/routes/config';
|
|
import { Outlet, useLocation } from 'react-router-dom';
|
|
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 = () => {
|
|
const navItemConfigs = buildNavItems(appRoutes);
|
|
const location = useLocation();
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down('md'));
|
|
const [sideNavOpen, setSideNavOpen] = useState(false);
|
|
const { data, loading } = useApi(fetchProfile, { immediate: true });
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
height: '100vh',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
// TODO: Check for better approach
|
|
width: isMobile ? '100%' : 1070,
|
|
height: isMobile ? '100vh' : '80%',
|
|
display: 'flex',
|
|
flexDirection: 'row-reverse',
|
|
borderRadius: isMobile ? 0 : 4,
|
|
backgroundColor: 'background.paper',
|
|
overflow: 'hidden',
|
|
}}
|
|
>
|
|
<Box sx={{ flex: 1 }}>
|
|
<Toolbar
|
|
isMobile={isMobile}
|
|
sideNavOpen={sideNavOpen}
|
|
setSideNavOpen={setSideNavOpen}
|
|
loading={loading}
|
|
user={{
|
|
firstName: data?.firstName || '',
|
|
lastName: data?.lastName || '',
|
|
phoneNumber: data?.phoneNumber || '',
|
|
profileUrl: data?.profileImageUrl,
|
|
}}
|
|
/>
|
|
<Box sx={{ flex: 1, overflowY: 'auto' }}>
|
|
<Outlet />
|
|
</Box>
|
|
</Box>
|
|
|
|
<SideNav
|
|
open={sideNavOpen}
|
|
onClose={() => setSideNavOpen(false)}
|
|
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"
|
|
positioning="absolute"
|
|
sideNavVariant={isMobile ? 'temporary' : 'full'}
|
|
top={8.125}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|