first commit

src/layout/MainLayout/index.jsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Outlet } from 'react-router-dom';
+import { Box, Toolbar, useMediaQuery } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
+
+import Header from './Header';
+import Sidebar, { DRAWER_WIDTH, MINI_WIDTH } from './Sidebar';
+
+export default function MainLayout() {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down('lg'));
+  const [open, setOpen] = useState(true);
+  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,
+          width: { lg: `calc(100% - ${open ? DRAWER_WIDTH : MINI_WIDTH}px)` },
+          minHeight: '100vh',
+          transition: theme.transitions.create('width', { duration: theme.transitions.duration.standard })
+        }}
+      >
+        <Toolbar sx={{ minHeight: 64 }} />
+        <Box sx={{ p: { xs: 2, sm: 3 } }}>
+          <Outlet />
+        </Box>
+      </Box>
+    </Box>
+  );
+}