Initial commit

src/layout/MainLayout/index.jsx

@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import { Box, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+import Header from './Header';
+import Sidebar from './Sidebar';
+
+export default function MainLayout() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
+  const [open, setOpen] = useState(false);
+  const [mobileOpen, setMobileOpen] = useState(false);
+
+  const toggle = () => {
+    if (isMobile) setMobileOpen((p) => !p);
+    else setOpen((p) => !p);
+  };
+
+  return (
+    <Box sx={{ display: 'flex', bgcolor: 'background.default', minHeight: '100vh' }}>
+      <Header onToggle={toggle} />
+      <Sidebar
+        open={open}
+        isMobile={isMobile}
+        mobileOpen={mobileOpen}
+        onMobileClose={() => setMobileOpen(false)}
+      />
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          minWidth: 0,
+          minHeight: '100vh',
+          display: 'flex',
+          flexDirection: 'column',
+          transition: theme.transitions.create('width', { duration: theme.transitions.duration.standard })
+        }}
+      >
+        <Box sx={{ height: 64, flexShrink: 0 }} />
+        <Box
+          sx={{
+            flexGrow: 1,
+            width: '100%',
+            maxWidth: '100%',
+            overflowX: 'hidden',
+            px: { xs: 1.5, sm: 2.5, md: 3.5 },
+            py: { xs: 2, sm: 2.5, md: 3 }
+          }}
+        >
+          <Outlet />
+        </Box>
+      </Box>
+    </Box>
+  );
+}