75 lines
2.5 KiB
JavaScript
75 lines
2.5 KiB
JavaScript
import { Drawer, List, ListItem, ListItemText, ListItemIcon, Avatar, Typography, Box, useMediaQuery } from '@mui/material';
|
|
import CategoryIcon from '@mui/icons-material/Category';
|
|
import PeopleIcon from '@mui/icons-material/People';
|
|
import InventoryIcon from '@mui/icons-material/Inventory';
|
|
import LocalShippingIcon from '@mui/icons-material/LocalShipping';
|
|
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
|
|
import { useState } from 'react';
|
|
|
|
const menuOptions = {
|
|
public: [
|
|
{ text: 'Categories', icon: <CategoryIcon /> },
|
|
{ text: 'Clients', icon: <PeopleIcon /> },
|
|
{ text: 'Products', icon: <InventoryIcon /> },
|
|
{ text: 'Providers', icon: <LocalShippingIcon /> },
|
|
{ text: 'Logout', icon: <ExitToAppIcon /> },
|
|
],
|
|
restricted: [],
|
|
private: [
|
|
{ text: 'Categories', icon: <CategoryIcon /> },
|
|
{ text: 'Clients', icon: <PeopleIcon /> },
|
|
{ text: 'Products', icon: <InventoryIcon /> },
|
|
{ text: 'Providers', icon: <LocalShippingIcon /> },
|
|
{ text: 'Logout', icon: <ExitToAppIcon /> },
|
|
],
|
|
};
|
|
|
|
export default function MenuDrawer({ zone = 'public', open, onClose, onSelect }) {
|
|
const isMobile = useMediaQuery('(max-width:900px)');
|
|
const items = menuOptions[zone];
|
|
|
|
return (
|
|
<Drawer anchor="left" open={open} onClose={onClose} slotProps={{
|
|
paper: {
|
|
sx: {
|
|
backgroundColor: '#40120EFF',
|
|
width: isMobile ? '100vw' : 250,
|
|
color: '#DFCCBCFF'
|
|
},
|
|
},
|
|
}}>
|
|
<Box textAlign="center" p={3}>
|
|
<Avatar
|
|
src="/favicon.png"
|
|
alt="User"
|
|
sx={{ width: 64, height: 64, mx: 'auto', mb: 1 }}
|
|
/>
|
|
<Typography variant="subtitle1" fontWeight={600}>Fendi Casa</Typography>
|
|
<Typography variant="body2">Administrator</Typography>
|
|
</Box>
|
|
<List sx={{ width: isMobile ? '100vw' : 250, marginTop: 2 }}>
|
|
{items.map(({ text, icon }, index) => (
|
|
<ListItem key={index} onClick={() => {
|
|
onClose(); // Close drawer
|
|
onSelect?.(text); // Notify parent of selected item
|
|
}}>
|
|
|
|
<ListItemIcon sx={{ color: '#DFCCBCFF' }}>{icon}</ListItemIcon>
|
|
<ListItemText
|
|
primary={text}
|
|
slotProps={{
|
|
primary: {
|
|
sx: {
|
|
color: '#DFCCBCFF',
|
|
fontWeight: 'medium',
|
|
},
|
|
},
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
))}
|
|
</List>
|
|
</Drawer>
|
|
);
|
|
}
|