rodolfo_ruiz/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: new screens and docker setup

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-06-12 21:07:51 -06:00
parent c20e04557b
commit 31600e5f1b
10 changed files with 291 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/components/MenuDrawer.jsx
View File

@@ -1,9 +1,27 @@
import { Drawer, List, ListItem, ListItemText, useMediaQuery } from '@mui/material';
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: ['Home', 'Explore', 'Contact'],
restricted: ['Dashboard', 'Projects', 'Support'],
private: ['Products', 'Clients', 'Providers', 'Logout'],
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 }) {
@@ -16,15 +34,27 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
sx: {
backgroundColor: '#40120EFF',
width: isMobile ? '100vw' : 250,
color: '#DFCCBCFF'
},
},
}}>
<List sx={{ width: isMobile ? '100vw' : 250, marginTop: 14 }}>
{items.map((text, index) => (
<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={{
@@ -41,4 +71,4 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
</List>
</Drawer>
);
}
}