37 lines (31 with data), 922 Bytes

import React, { useState } from 'react';
import { Box, CssBaseline, styled } from '@mui/material';
import { AppBar } from './AppBar';
import { Sidebar } from './Sidebar';

const Main = styled('main')(({ theme }) => ({
  flexGrow: 1,
  padding: theme.spacing(3),
  width: '100%',
  minHeight: '100vh',
  marginTop: 64, // AppBar height
  backgroundColor: theme.palette.background.default,
}));

interface LayoutProps {
  children: React.ReactNode;
}

export const Layout: React.FC<LayoutProps> = ({ children }) => {
  const [isSidebarOpen, setIsSidebarOpen] = useState(false);

  const handleSidebarToggle = () => {
    setIsSidebarOpen(!isSidebarOpen);
  };

  return (
    <Box sx={{ display: 'flex' }}>
      <CssBaseline />
      <AppBar onMenuClick={handleSidebarToggle} />
      <Sidebar open={isSidebarOpen} onClose={() => setIsSidebarOpen(false)} />
      <Main>
        {children}
      </Main>
    </Box>
  );
};