نسخ من RaghadAlkhous/RestaurantDash
update the dashbord and router
هذا الالتزام موجود في:
raghad
207
src/components/Home/SideHome.js
Normal file
207
src/components/Home/SideHome.js
Normal file
@@ -0,0 +1,207 @@
|
||||
import React from 'react';
|
||||
import { useNavigate, useLocation } from 'react-router-dom';
|
||||
import {
|
||||
Drawer,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemText,
|
||||
Box,
|
||||
useTheme,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import {
|
||||
DashboardRounded as DashboardIcon,
|
||||
PointOfSale as CashierIcon,
|
||||
AllInbox as SupplierIcon,
|
||||
Store as InventoryIcon,
|
||||
School as TrainingIcon,
|
||||
AutoGraph as AnalyticsIcon,
|
||||
Restaurant as RestaurantIcon,
|
||||
CountertopsTwoTone as HostKitchenIcon,
|
||||
Queue as CreateKitchenIcon,
|
||||
Settings as SettingsIcon,
|
||||
Logout as LogoutIcon
|
||||
} from '@mui/icons-material';
|
||||
|
||||
const menuItems = [
|
||||
{ text: 'Dashboard', icon: <DashboardIcon />, path: '/dashboard' },
|
||||
{ text: 'Cashier', icon: <CashierIcon />, path: '/cashier' },
|
||||
{ text: 'Supplier', icon: <SupplierIcon />, path: '/supplier' },
|
||||
{ text: 'Inventory', icon: <InventoryIcon />, path: '/inventory' },
|
||||
{ text: 'Training', icon: <TrainingIcon />, path: '/training' },
|
||||
{ text: 'Analytics & Reporting', icon: <AnalyticsIcon />, path: '/analytics' },
|
||||
{ text: 'Restaurant Profile', icon: <RestaurantIcon />, path: '/profile' },
|
||||
{ text: 'Host Kitchen', icon: <HostKitchenIcon />, path: '/host-kitchen' },
|
||||
{ text: 'Create Kitchen', icon: <CreateKitchenIcon />, path: '/create-kitchen' },
|
||||
|
||||
];
|
||||
|
||||
const bottomItems = [
|
||||
{ text: 'Settings', icon: <SettingsIcon />, path: '/settings' },
|
||||
{ text: 'Log Out', icon: <LogoutIcon />, path: '/login' },
|
||||
];
|
||||
|
||||
const Sidebar = ({ open, onClose, isMobile, drawerWidth }) => {
|
||||
const theme = useTheme();
|
||||
const navigate = useNavigate();
|
||||
const location = useLocation();
|
||||
|
||||
const renderListItems = (items) =>
|
||||
items.map((item, index) => {
|
||||
const isActive = location.pathname === item.path;
|
||||
|
||||
return (
|
||||
<ListItem key={index} disablePadding sx={{ px: 1 }}>
|
||||
<Box
|
||||
onClick={() => {
|
||||
if (item.text === 'Log Out') {
|
||||
localStorage.removeItem('token');
|
||||
}
|
||||
navigate(item.path);
|
||||
if (isMobile) onClose();
|
||||
}}
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
width: '100%',
|
||||
borderRadius: '5px',
|
||||
backgroundColor: isActive ? '#F8F6F8' : 'transparent',
|
||||
px: 2,
|
||||
py: 1,
|
||||
cursor: 'pointer',
|
||||
transition: 'background-color 0.2s',
|
||||
'&:hover': {
|
||||
backgroundColor: '#fffcf9d5',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<ListItemIcon sx={{
|
||||
color: isActive ? theme.palette.primary.main : '#A6ACB8',
|
||||
minWidth: 36
|
||||
}}>
|
||||
{item.icon}
|
||||
</ListItemIcon>
|
||||
<ListItemText
|
||||
primary={item.text}
|
||||
primaryTypographyProps={{
|
||||
sx: {
|
||||
color: isActive ? theme.palette.primary.main : '#61677F',
|
||||
fontSize: '0.875rem'
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</ListItem>
|
||||
);
|
||||
});
|
||||
|
||||
const drawer = (
|
||||
<Box sx={{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
bgcolor: 'background.paper'
|
||||
}}>
|
||||
<Box
|
||||
sx={{
|
||||
px: 2,
|
||||
py: 1.5,
|
||||
borderColor: 'divider',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: 1,
|
||||
bgcolor: 'background.paper'
|
||||
}}
|
||||
>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Box
|
||||
component="img"
|
||||
src="/image.png"
|
||||
alt="logo"
|
||||
sx={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
objectFit: 'contain',
|
||||
mr: 1.5,
|
||||
}}
|
||||
/>
|
||||
<Box display="flex" alignItems="center">
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: '1.25rem',
|
||||
color: 'text.primary',
|
||||
}}
|
||||
>
|
||||
KITCH
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
fontWeight: 400,
|
||||
fontSize: '1.25rem',
|
||||
color: 'primary.main',
|
||||
ml: 0.5,
|
||||
}}
|
||||
>
|
||||
PLUS
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
flex: 1,
|
||||
overflowY: 'auto',
|
||||
scrollbarWidth: 'none',
|
||||
'&::-webkit-scrollbar': { display: 'none' },
|
||||
py: 1
|
||||
}}>
|
||||
<List>{renderListItems(menuItems)}</List>
|
||||
</Box>
|
||||
|
||||
<Box sx={{
|
||||
position: 'sticky',
|
||||
bottom: 0,
|
||||
bgcolor: 'background.paper',
|
||||
borderColor: 'divider'
|
||||
}}>
|
||||
<List>{renderListItems(bottomItems)}</List>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
return (
|
||||
<Box
|
||||
component="nav"
|
||||
sx={{
|
||||
width: { xs: 0, sm: 0, md: drawerWidth },
|
||||
flexShrink: { xs: 0, sm: 0, md: 0 },
|
||||
boxShadow: 'none',
|
||||
}}
|
||||
>
|
||||
<Drawer
|
||||
variant={isMobile ? 'temporary' : 'persistent'}
|
||||
open={open}
|
||||
onClose={onClose}
|
||||
ModalProps={{ keepMounted: true }}
|
||||
sx={{
|
||||
'& .MuiDrawer-paper': {
|
||||
width: drawerWidth,
|
||||
boxSizing: 'border-box',
|
||||
borderRight: 'none',
|
||||
boxShadow: 'none'
|
||||
},
|
||||
}}
|
||||
>
|
||||
{drawer}
|
||||
</Drawer>
|
||||
|
||||
</Box>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
export default Sidebar;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم