feat: add router config, layout, header, and toolbar

src/components/Layout/Layout.tsx

@@ -1,13 +1,24 @@
 import { SideNav } from '@rkheftan/harmony-ui';
-import { buildNavItems } from './navItems';
+import { buildNavItems } from './buildNavItems';
 import { appRoutes } from '@/routes/config';
 import { Outlet, useLocation } from 'react-router-dom';
-import { Box } from '@mui/material';
-import { grey } from '@mui/material/colors';
+import { Box, useMediaQuery, useTheme } from '@mui/material';
+import { Header } from './Header';
+import { useState } from 'react';
+import { Toolbar } from './Toolbar';
+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 [user] = useState<User>({
+    firstName: 'محمد حسین',
+    lastName: 'برزه گر',
+    phoneNumber: '09123456789',
+  });
 
   return (
     <Box
@@ -20,25 +31,37 @@ export const Layout = () => {
     >
       <Box
         sx={{
-          width: 1070,
-          height: '80%',
+          // TODO: Check for better approach
+          width: isMobile ? '100%' : 1070,
+          height: isMobile ? '100vh' : '80%',
           display: 'flex',
           flexDirection: 'row-reverse',
-          borderRadius: 4,
+          borderRadius: isMobile ? 0 : 4,
           backgroundColor: 'background.paper',
           overflow: 'hidden',
-          padding: 1,
         }}
       >
         <Box sx={{ flex: 1 }}>
+          <Toolbar
+            isMobile={isMobile}
+            sideNavOpen={sideNavOpen}
+            setSideNavOpen={setSideNavOpen}
+            user={user}
+          />
           <Outlet />
         </Box>
 
         <SideNav
+          open={sideNavOpen}
+          onClose={() => setSideNavOpen(false)}
+          header={isMobile ? undefined : <Header user={user} />}
+          footer={isMobile ? <Header user={user} /> : undefined}
           navConfig={navItemConfigs}
           activePath={location.pathname + location.hash}
           selectedVariant="textOnly"
           positioning="absolute"
+          sideNavVariant={isMobile ? 'temporary' : 'full'}
+          top={8.125}
         />
       </Box>
     </Box>