MCP Document Processor

import React from 'react'; import { Link as RouterLink } from 'react-router-dom'; import { AppBar, Box, Drawer, Toolbar, Typography, List, ListItem, ListItemIcon, ListItemText, Container } from '@mui/material'; import DashboardIcon from '@mui/icons-material/Dashboard'; import UploadFileIcon from '@mui/icons-material/UploadFile'; const drawerWidth = 240; function Layout({ children }) { return ( <Box sx={{ display: 'flex' }}> <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}> <Toolbar> <Typography variant="h6" noWrap component="div"> MCP Document Processor </Typography> </Toolbar> </AppBar> <Drawer variant="permanent" sx={{ width: drawerWidth, flexShrink: 0, [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' }, }} > <Toolbar /> <Box sx={{ overflow: 'auto' }}> <List> <ListItem button component={RouterLink} to="/"> <ListItemIcon> <DashboardIcon /> </ListItemIcon> <ListItemText primary="Dashboard" /> </ListItem> <ListItem button component={RouterLink} to="/upload"> <ListItemIcon> <UploadFileIcon /> </ListItemIcon> <ListItemText primary="Upload Document" /> </ListItem> </List> </Box> </Drawer> <Box component="main" sx={{ flexGrow: 1, p: 3 }}> <Toolbar /> <Container maxWidth="lg"> {children} </Container> </Box> </Box> ); } export default Layout;