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

chore: design the ui based on figmas

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-08-06 21:29:10 -06:00
parent ff2dd6b095
commit 4eb3fa590c
6 changed files with 46 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/MenuDrawer.jsx
View File

@@ -1,30 +1,25 @@
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 AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
import { Drawer, List, ListItem, ListItemText, ListItemIcon, Typography, Box, useMediaQuery, InputBase } from '@mui/material';
import { useAuth } from '../context/AuthContext';
import { useState } from 'react';
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
const menuOptions = {
public: [
{ text: 'Admin', icon: <AdminPanelSettingsIcon /> },
{ text: 'Categories', icon: <CategoryIcon /> },
{ text: 'Clients', icon: <PeopleIcon /> },
{ text: 'Products', icon: <InventoryIcon /> },
{ text: 'Providers', icon: <LocalShippingIcon /> },
{ text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} />},
{ text: 'Logout', icon: <ExitToAppIcon /> },
],
restricted: [],
private: [
{ text: 'Admin', icon: <AdminPanelSettingsIcon /> },
{ text: 'Categories', icon: <CategoryIcon /> },
{ text: 'Clients', icon: <PeopleIcon /> },
{ text: 'Products', icon: <InventoryIcon /> },
{ text: 'Providers', icon: <LocalShippingIcon /> },
{ text: 'Dashboard', icon: <img src="/Dashboard.png" alt="Dashboard" width={24} height={24} /> },
{ text: 'Catalog', icon: <img src="/Catalog.png" alt="Catalog" width={24} height={24} /> },
{ text: 'Define your style', icon: <img src="/DefineYourStyle.png" alt="Define your style" width={24} height={24} /> },
{ text: 'Ambient Design', icon: <img src="/AmbientDesign.png" alt="Ambient Design" width={24} height={24} /> },
{ text: 'Flat Layouts and assets', icon: <img src="/FlatLayouts.png" alt="Flat Layouts and assets" width={24} height={24} /> },
{ text: 'Export and sharing', icon: <img src="/ExportAndSharing.png" alt="Export and sharing" width={24} height={24} /> },
{ text: 'Shopping cart', icon: <img src="/ShoppingCart.png" alt="Shopping cart" width={24} height={24} /> },
{ text: 'Settings', icon: <img src="/Settings.png" alt="Settings" width={24} height={24} /> },
{ text: 'Help', icon: <img src="/Help.png" alt="Help" width={24} height={24} /> },
{ text: 'Logout', icon: <ExitToAppIcon /> },
],
};
@@ -39,22 +34,35 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
<Drawer anchor="left" open={open} onClose={onClose} slotProps={{
paper: {
sx: {
backgroundColor: '#40120EFF',
width: isMobile ? '100vw' : 250,
color: '#DFCCBCFF'
backgroundColor: '#FFFFFFFF',
width: isMobile ? '100vw' : 300,
color: '#40120EFF'
},
},
}}>
<Box textAlign="center" p={3}>
<Avatar
src="/favicon.png"
alt="User"
sx={{ width: 64, height: 64, mx: 'auto', mb: 1 }}
<img
src="/logo.png"
alt="Dream Views"
style={{ margin: 'auto', marginBottom: 8 }}
/>
<Typography variant="subtitle1" fontWeight={600}>Fendi Casa</Typography>
<Typography variant="body2">Administrator</Typography>
<Box sx={{ position: 'relative', display: { xs: 'none', md: 'flex' } }}>
<InputBase
placeholder="Filter options..."
sx={{
pl: 4,
pr: 2,
py: 0.5,
borderRadius: 2,
border: '1px solid #40120EFF', // Borde visible
color: '#40120EFF',
width: { md: '300px', lg: '400px' }
}}
/>
</Box>
</Box>
<List sx={{ width: isMobile ? '100vw' : 250, marginTop: 2 }}>
<List sx={{ width: isMobile ? '100vw' : 250, marginTop: 0 }}>
{items.map(({ text, icon }, index) => (
<ListItem key={index} onClick={() => {
onClose(); // Close drawer
@@ -67,13 +75,13 @@ export default function MenuDrawer({ zone = 'public', open, onClose, onSelect })
}
}}>
<ListItemIcon sx={{ color: '#DFCCBCFF' }}>{icon}</ListItemIcon>
<ListItemIcon sx={{ color: '#40120EFF' }}>{icon}</ListItemIcon>
<ListItemText
primary={text}
slotProps={{
primary: {
sx: {
color: '#DFCCBCFF',
color: '#40120EFF',
fontWeight: 'medium',
},
},