109 lines
3.0 KiB
JavaScript
109 lines
3.0 KiB
JavaScript
import { useEffect, useRef, useState } from 'react';
|
|
|
|
// material-ui
|
|
import { useTheme } from '@mui/material/styles';
|
|
import { AppBar, Box, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
|
|
|
|
// project import
|
|
import Search from './Search';
|
|
import Profile from './Profile';
|
|
import IconButton from 'components/@extended/IconButton';
|
|
import Transitions from 'components/@extended/Transitions';
|
|
import { ThemeMode } from 'config';
|
|
|
|
// assets
|
|
import { MoreOutlined } from '@ant-design/icons';
|
|
|
|
// ==============================|| HEADER CONTENT - MOBILE ||============================== //
|
|
|
|
const MobileSection = () => {
|
|
const theme = useTheme();
|
|
|
|
const [open, setOpen] = useState(false);
|
|
const anchorRef = useRef(null);
|
|
|
|
const handleToggle = () => {
|
|
setOpen((prevOpen) => !prevOpen);
|
|
};
|
|
|
|
const handleClose = (event) => {
|
|
if (anchorRef.current && anchorRef.current.contains(event.target)) {
|
|
return;
|
|
}
|
|
|
|
setOpen(false);
|
|
};
|
|
|
|
const prevOpen = useRef(open);
|
|
useEffect(() => {
|
|
if (prevOpen.current === true && open === false) {
|
|
anchorRef.current.focus();
|
|
}
|
|
|
|
prevOpen.current = open;
|
|
}, [open]);
|
|
|
|
const iconBackColorOpen = theme.palette.mode === ThemeMode.DARK ? 'grey.200' : 'grey.300';
|
|
const iconBackColor = theme.palette.mode === ThemeMode.DARK ? 'background.default' : 'grey.100';
|
|
|
|
return (
|
|
<>
|
|
<Box sx={{ flexShrink: 0, ml: 0.75 }}>
|
|
<IconButton
|
|
// sx={{ color: 'text.primary', bgcolor: open ? iconBackColorOpen : iconBackColor }}
|
|
sx={{ color: '#fff', bgcolor: 'transparent', ml: { xs: 0, lg: -2 },
|
|
fontSize:'25px',
|
|
':hover':{
|
|
color: '#fff', bgcolor: 'transparent'
|
|
} }}
|
|
aria-label="open more menu"
|
|
ref={anchorRef}
|
|
aria-controls={open ? 'menu-list-grow' : undefined}
|
|
aria-haspopup="true"
|
|
onClick={handleToggle}
|
|
color="secondary"
|
|
variant="light"
|
|
>
|
|
<MoreOutlined />
|
|
</IconButton>
|
|
</Box>
|
|
<Popper
|
|
placement="bottom-end"
|
|
open={open}
|
|
anchorEl={anchorRef.current}
|
|
role={undefined}
|
|
transition
|
|
disablePortal
|
|
style={{ width: '100%' }}
|
|
popperOptions={{
|
|
modifiers: [
|
|
{
|
|
name: 'offset',
|
|
options: {
|
|
offset: [0, 9]
|
|
}
|
|
}
|
|
]
|
|
}}
|
|
>
|
|
{({ TransitionProps }) => (
|
|
<Transitions type="fade" in={open} {...TransitionProps}>
|
|
<Paper sx={{ boxShadow: theme.customShadows.z1 }}>
|
|
<ClickAwayListener onClickAway={handleClose}>
|
|
<AppBar color="inherit">
|
|
<Toolbar>
|
|
{/* <Search /> */}
|
|
<Profile />
|
|
</Toolbar>
|
|
</AppBar>
|
|
</ClickAwayListener>
|
|
</Paper>
|
|
</Transitions>
|
|
)}
|
|
</Popper>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default MobileSection;
|