import React from 'react';
import {
Drawer,
List,
ListItem,
ListItemIcon,
ListItemText,
Divider,
Box,
Typography
} from '@mui/material';
import {
Dashboard as DashboardIcon,
ShoppingCart as OrdersIcon,
LocalShipping as ShipmentsIcon,
Inventory as InventoryIcon,
LocationOn as TrackingIcon,
AssignmentReturn as ReturnsIcon,
Settings as SettingsIcon
} from '@mui/icons-material';
const drawerWidth = 240;
interface SidebarProps {
mobileOpen: boolean;
handleDrawerToggle: () => void;
}
const Sidebar: React.FC<SidebarProps> = ({ mobileOpen, handleDrawerToggle }) => {
const menuItems = [
{ text: 'Dashboard', icon: <DashboardIcon />, path: '/' },
{ text: 'Orders', icon: <OrdersIcon />, path: '/orders' },
{ text: 'Shipments', icon: <ShipmentsIcon />, path: '/shipments' },
{ text: 'Inventory', icon: <InventoryIcon />, path: '/inventory' },
{ text: 'Tracking', icon: <TrackingIcon />, path: '/tracking' },
{ text: 'Returns', icon: <ReturnsIcon />, path: '/returns' },
];
const drawer = (
<div>
<Box sx={{ p: 2, bgcolor: 'primary.main', color: 'white' }}>
<Typography variant="h6" noWrap>
MCP Control Center
</Typography>
</Box>
<Divider />
<List>
{menuItems.map((item) => (
<ListItem
button
key={item.text}
component="a"
href={item.path}
>
<ListItemIcon>{item.icon}</ListItemIcon>
<ListItemText primary={item.text} />
</ListItem>
))}
</List>
<Divider />
<List>
<ListItem button component="a" href="/settings">
<ListItemIcon>
<SettingsIcon />
</ListItemIcon>
<ListItemText primary="Settings" />
</ListItem>
</List>
</div>
);
return (
<Box
component="nav"
sx={{ width: { sm: drawerWidth }, flexShrink: { sm: 0 } }}
>
<Drawer
variant="temporary"
open={mobileOpen}
onClose={handleDrawerToggle}
ModalProps={{
keepMounted: true,
}}
sx={{
display: { xs: 'block', sm: 'none' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
>
{drawer}
</Drawer>
<Drawer
variant="permanent"
sx={{
display: { xs: 'none', sm: 'block' },
'& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
}}
open
>
{drawer}
</Drawer>
</Box>
);
};
export default Sidebar;
