code handover
This commit is contained in:
joshikannan
309
src/layout/MainLayout/Header/HeaderContent/index.js
Normal file
309
src/layout/MainLayout/Header/HeaderContent/index.js
Normal file
@@ -0,0 +1,309 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
|
||||
// material-ui
|
||||
import {
|
||||
Box,
|
||||
useMediaQuery,
|
||||
Stack,
|
||||
Tooltip,
|
||||
IconButton,
|
||||
Popper,
|
||||
ClickAwayListener,
|
||||
List,
|
||||
ListItem,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
Grid,
|
||||
ListItemIcon,
|
||||
Typography
|
||||
} from '@mui/material';
|
||||
import { TbBoxMultiple1 } from 'react-icons/tb';
|
||||
import { GrMultiple } from 'react-icons/gr';
|
||||
import { TbUserEdit } from 'react-icons/tb';
|
||||
|
||||
import Transitions from 'components/@extended/Transitions';
|
||||
|
||||
// project import
|
||||
import Search from './Search';
|
||||
import Message from './Message';
|
||||
import Profile from './Profile';
|
||||
import Notification from './Notification';
|
||||
import MobileSection from './MobileSection';
|
||||
import MegaMenuSection from './MegaMenuSection';
|
||||
import { useNavigate } from 'react-router';
|
||||
import SportsMotorsportsOutlinedIcon from '@mui/icons-material/SportsMotorsportsOutlined';
|
||||
import {
|
||||
MailOutlined,
|
||||
// DashboardOutlined,
|
||||
UserOutlined,
|
||||
CustomerServiceOutlined,
|
||||
WindowsOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useTheme } from '@mui/material/styles';
|
||||
|
||||
// ==============================|| HEADER - CONTENT ||============================== //
|
||||
|
||||
const HeaderContent = () => {
|
||||
const matchesXs = useMediaQuery((theme) => theme.breakpoints.down('md'));
|
||||
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
const megaMenu = useMemo(() => <MegaMenuSection />, []);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [anchorEl, setAnchorEl] = useState(null);
|
||||
const theme = useTheme();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
// const megaMenu = useMemo(() => <MegaMenuSection />, []);
|
||||
const iconBackColorOpen = 'grey.300';
|
||||
const iconBackColor = 'grey.100';
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleToggle = (e) => {
|
||||
setOpen(!open);
|
||||
setAnchorEl(e.currentTarget);
|
||||
};
|
||||
const handleClickAway = () => {
|
||||
setOpen(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
{/* {!matchesXs && <Search />} */}
|
||||
<Stack width="100%" direction="row" justifyContent="space-between" spacing={2} alignItems="center">
|
||||
{/* {!matchesXs && megaMenu} */}
|
||||
<Typography variant="h5" sx={{ ml: 2, color: '#fff' }} noWrap>
|
||||
{localStorage.getItem('firstname') || ''}
|
||||
</Typography>
|
||||
{matchesXs && <Box sx={{ ml: 1 }} />}
|
||||
<Stack direction={'row'} spacing={2}>
|
||||
<Box sx={{ flexShrink: 0, ml: 0.75 }}>
|
||||
<Tooltip title="Quick Menu" placement="left-start">
|
||||
<IconButton
|
||||
// color="secondary"
|
||||
// variant="light"
|
||||
// sx={{
|
||||
// color: 'text.primary',
|
||||
// bgcolor: open ? iconBackColorOpen : iconBackColor
|
||||
// }}
|
||||
sx={{
|
||||
color: '#fff',
|
||||
fontSize: '20px',
|
||||
// bgcolor: open ? iconBackColorOpen : iconBackColor
|
||||
bgcolor: 'transparent'
|
||||
// border:'1px solid #fff'
|
||||
}}
|
||||
aria-label="open profile"
|
||||
// ref={anchorRef}
|
||||
// aria-controls={open ? 'profile-grow' : undefined}
|
||||
aria-haspopup="true"
|
||||
onClick={handleToggle}
|
||||
>
|
||||
<WindowsOutlined />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Popper
|
||||
open={open}
|
||||
placement="bottom"
|
||||
anchorEl={anchorEl}
|
||||
role={undefined}
|
||||
// transition
|
||||
disablePortal
|
||||
popperOptions={{
|
||||
modifiers: [
|
||||
{
|
||||
name: 'offset',
|
||||
options: {
|
||||
offset: 0
|
||||
}
|
||||
}
|
||||
]
|
||||
}}
|
||||
sx={{
|
||||
// backgroundColor:'white',
|
||||
// border:1,
|
||||
p: 0,
|
||||
zIndex: 5000,
|
||||
boxShadow: theme.customShadows.z1
|
||||
}}
|
||||
>
|
||||
<Transitions type="grow" position="top" sx={{ overflow: 'hidden' }} in={open}>
|
||||
{/* <Box sx={{
|
||||
backgroundColor: 'white',
|
||||
border: '1px solid #e0e0e0 !important',
|
||||
borderRadius: 1,
|
||||
}}> */}
|
||||
<Box
|
||||
sx={
|
||||
{
|
||||
// boxShadow: theme.customShadows.z1,
|
||||
}
|
||||
}
|
||||
>
|
||||
<ClickAwayListener onClickAway={handleClickAway}>
|
||||
{/* <List disablePadding> */}
|
||||
<List
|
||||
component="nav"
|
||||
sx={{
|
||||
mt: 1.5,
|
||||
p: 0,
|
||||
width: '100%',
|
||||
minWidth: 200,
|
||||
maxWidth: 290,
|
||||
bgcolor: theme.palette.background.paper,
|
||||
borderRadius: 0.5,
|
||||
[theme.breakpoints.down('md')]: {
|
||||
maxWidth: 250
|
||||
}
|
||||
}}
|
||||
>
|
||||
<ListItemButton
|
||||
selected={location.pathname === '/nearle/orders/create'}
|
||||
onClick={() => {
|
||||
// console.log(const location = useLocation();)
|
||||
navigate('/nearle/orders/create');
|
||||
handleClickAway();
|
||||
}}
|
||||
>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Grid container>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<TbBoxMultiple1 />
|
||||
</ListItemIcon>
|
||||
<Typography color="textPrimary">Create Order</Typography>
|
||||
</Grid>
|
||||
}
|
||||
/>
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
selected={location.pathname === '/nearle/orders/createorders'}
|
||||
onClick={() => {
|
||||
// console.log(const location = useLocation();)
|
||||
navigate('/nearle/orders/createorders');
|
||||
handleClickAway();
|
||||
}}
|
||||
>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Grid container>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<GrMultiple />
|
||||
</ListItemIcon>
|
||||
<Typography color="textPrimary">Create Multiple Order</Typography>
|
||||
</Grid>
|
||||
}
|
||||
/>
|
||||
</ListItemButton>
|
||||
<ListItemButton
|
||||
selected={location.pathname === '/nearle/customer/create'}
|
||||
onClick={() => {
|
||||
navigate('/nearle/customer/create');
|
||||
handleClickAway();
|
||||
}}
|
||||
>
|
||||
<ListItemText
|
||||
primary={
|
||||
<Grid container>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<TbUserEdit />
|
||||
</ListItemIcon>
|
||||
<Typography color="textPrimary">Create Customer</Typography>
|
||||
</Grid>
|
||||
}
|
||||
/>
|
||||
</ListItemButton>
|
||||
{/* <ListItemButton
|
||||
selected={location.pathname === '/clients/create'}
|
||||
onClick={() => {
|
||||
navigate('/clients/create')
|
||||
handleClickAway()
|
||||
}} >
|
||||
<ListItemText
|
||||
primary={
|
||||
<Grid container>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<CustomerServiceOutlined />
|
||||
</ListItemIcon>
|
||||
<Typography color="textPrimary">Create Client</Typography>
|
||||
|
||||
</Grid>
|
||||
}
|
||||
/>
|
||||
</ListItemButton> */}
|
||||
{/* <ListItemButton
|
||||
selected={location.pathname === '/riders/create'}
|
||||
onClick={() => {
|
||||
navigate('/riders/create')
|
||||
handleClickAway()
|
||||
}} >
|
||||
<ListItemText
|
||||
primary={
|
||||
<Grid container>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<SportsMotorsportsOutlinedIcon />
|
||||
</ListItemIcon>
|
||||
<Typography color="textPrimary">Create Rider</Typography>
|
||||
|
||||
</Grid>
|
||||
}
|
||||
/>
|
||||
</ListItemButton> */}
|
||||
|
||||
{/* <ListItem disablePadding>
|
||||
<ListItemButton sx={{ p: 2 }} onClick={() => {
|
||||
navigate('/create_order')
|
||||
handleClickAway()
|
||||
}}>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<MailOutlined />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Create Order" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ p: 2 }} onClick={() => {
|
||||
navigate('/create_client')
|
||||
handleClickAway()
|
||||
}}>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<CustomerServiceOutlined />
|
||||
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Create Client" />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
<ListItem disablePadding>
|
||||
<ListItemButton sx={{ p: 2 }} onClick={() => {
|
||||
navigate('/create_staff')
|
||||
handleClickAway()
|
||||
}}>
|
||||
<ListItemIcon sx={{ mr: 1, fontSize: '20px' }}>
|
||||
<UserOutlined />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Create Staff" />
|
||||
</ListItemButton>
|
||||
</ListItem> */}
|
||||
</List>
|
||||
</ClickAwayListener>
|
||||
{/* </Box> */}
|
||||
</Box>
|
||||
</Transitions>
|
||||
</Popper>
|
||||
</Box>
|
||||
|
||||
<Notification />
|
||||
|
||||
{/* <Message /> */}
|
||||
{/* {!matchesXs && <Profile />}
|
||||
{matchesXs && <MobileSection />} */}
|
||||
<Tooltip title="Notifications">
|
||||
<Profile />
|
||||
</Tooltip>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default HeaderContent;
|
||||
Reference in New Issue
Block a user