نسخ من RaghadAlkhous/RestaurantDash
update the dashbord and router
هذا الالتزام موجود في:
raghad
210
src/components/Home/AppBar.js
Normal file
210
src/components/Home/AppBar.js
Normal file
@@ -0,0 +1,210 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
AppBar,
|
||||
Toolbar,
|
||||
Typography,
|
||||
Box,
|
||||
IconButton,
|
||||
Divider,
|
||||
Avatar,
|
||||
Button,
|
||||
Autocomplete,
|
||||
TextField,
|
||||
InputAdornment,
|
||||
useTheme,
|
||||
useMediaQuery,
|
||||
} from '@mui/material';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import MenuIcon from '@mui/icons-material/Menu';
|
||||
import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
|
||||
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
|
||||
const top100Films = [
|
||||
{ title: 'The Shawshank Redemption' },
|
||||
{ title: 'The Godfather' },
|
||||
{ title: 'The Dark Knight' },
|
||||
{ title: 'Pulp Fiction' },
|
||||
];
|
||||
|
||||
const KitchPlusAppBar = ({ onDrawerToggle, sidebarOpen, isMobile }) => {
|
||||
const location = useLocation();
|
||||
const theme = useTheme();
|
||||
const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
|
||||
const isMediumScreen = useMediaQuery(theme.breakpoints.between('sm', 'md'));
|
||||
|
||||
return (
|
||||
<AppBar
|
||||
sx={{
|
||||
height: { xs: 56, sm: 64, md: 66 },
|
||||
backgroundColor: '#F6F6F6',
|
||||
color: 'black',
|
||||
boxShadow: 'none',
|
||||
borderBottom: '1px solid #e0e0e0',
|
||||
position: 'sticky',
|
||||
top: 0,
|
||||
zIndex: theme.zIndex.appBar,
|
||||
}}
|
||||
>
|
||||
<Toolbar
|
||||
sx={{
|
||||
px: { xs: 2, sm: 3, md: '24px' },
|
||||
minHeight: { xs: '56px !important', sm: '64px !important' },
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
{/* Left side with toggle button */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center' }}>
|
||||
{/* Toggle button for mobile/tablet */}
|
||||
{(isMobile || isMediumScreen) && (
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
edge="start"
|
||||
onClick={onDrawerToggle}
|
||||
sx={{ mr: 2 }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
)}
|
||||
|
||||
{location.pathname === '/dashboard' ? (
|
||||
<Typography
|
||||
variant="h6"
|
||||
component="div"
|
||||
sx={{
|
||||
fontWeight: '500',
|
||||
fontSize: { xs: '18px', sm: '20px', md: '24px' },
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: { xs: '200px', sm: 'none' }
|
||||
}}
|
||||
>
|
||||
Welcome to KitchPlus
|
||||
</Typography>
|
||||
) : (
|
||||
<Autocomplete
|
||||
sx={{
|
||||
width: { xs: '200px', sm: '250px', md: '300px' },
|
||||
borderRadius: '8px',
|
||||
}}
|
||||
freeSolo
|
||||
id="free-solo-2-demo"
|
||||
disableClearable
|
||||
options={top100Films.map((option) => option.title)}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
placeholder="Search"
|
||||
InputProps={{
|
||||
...params.InputProps,
|
||||
type: 'search',
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<SearchIcon sx={{ color: '#667085' }} />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
sx={{
|
||||
'& .MuiInputBase-root': {
|
||||
backgroundColor: 'white',
|
||||
height: { xs: 36, sm: 38, md: 40 },
|
||||
},
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{/* Right side */}
|
||||
<Box sx={{ display: 'flex', alignItems: 'center', gap: { xs: 0.8, sm: 1, md: 1.5 } }}>
|
||||
{location.pathname === '/dashboard' && !isSmallScreen && (
|
||||
<Button
|
||||
variant="contained"
|
||||
sx={{
|
||||
display: { xs: 'none', sm: 'none', md: 'flex' }, // هذا السطر يخفي الزر عند xs و sm ويظهره من md وما فوق
|
||||
color: 'white',
|
||||
height: { xs: 32, sm: 36, md: 40 },
|
||||
mr: { xs: '6px', sm: '8px', md: '10px' },
|
||||
backgroundColor: '#61677F',
|
||||
borderRadius: '8px',
|
||||
fontWeight: 600,
|
||||
fontSize: { xs: '12px', sm: '13px', md: '14px' },
|
||||
textTransform: 'none',
|
||||
whiteSpace: 'nowrap',
|
||||
}}
|
||||
>
|
||||
{isMediumScreen ? 'Switch Company' : 'Switch Company Profits'}
|
||||
</Button>
|
||||
)}
|
||||
{location.pathname === '/dashboard' && (
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
flexItem
|
||||
sx={{
|
||||
height: { xs: 30, sm: 36, md: 40 },
|
||||
alignSelf: 'center',
|
||||
mx: 1 // إضافة هامش أفقي إذا لزم الأمر
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<IconButton color="#667085" size={isSmallScreen ? 'small' : 'medium'}>
|
||||
<NotificationsOutlinedIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
|
||||
</IconButton>
|
||||
|
||||
<Divider
|
||||
orientation="vertical"
|
||||
flexItem
|
||||
sx={{
|
||||
height: { xs: 30, sm: 36, md: 40 },
|
||||
alignSelf: 'center'
|
||||
}}
|
||||
/>
|
||||
|
||||
<Avatar
|
||||
alt="Admin"
|
||||
src="/images/waitress3.png"
|
||||
sx={{
|
||||
width: { xs: 28, sm: 32, md: 40 },
|
||||
height: { xs: 28, sm: 32, md: 40 }
|
||||
}}
|
||||
/>
|
||||
|
||||
{!isSmallScreen && (
|
||||
<Typography
|
||||
variant="body1"
|
||||
sx={{
|
||||
ml: { sm: 0.5, md: 1 },
|
||||
color: '#61677F',
|
||||
fontSize: { xs: '12px', sm: '13px', md: '14px' },
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
maxWidth: { xs: '100px', sm: '120px', md: 'none' }
|
||||
}}
|
||||
>
|
||||
Admin@gmail.com
|
||||
</Typography>
|
||||
)}
|
||||
|
||||
<IconButton
|
||||
color="inherit"
|
||||
sx={{
|
||||
mt: 0.5,
|
||||
color: '#A6ACB8',
|
||||
padding: { xs: '4px', sm: '8px' }
|
||||
}}
|
||||
size={isSmallScreen ? 'small' : 'medium'}
|
||||
>
|
||||
<KeyboardArrowDownIcon fontSize={isSmallScreen ? 'small' : 'medium'} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
);
|
||||
};
|
||||
|
||||
export default KitchPlusAppBar;
|
||||
المرجع في مشكلة جديدة
حظر مستخدم