118 lines
2.9 KiB
TypeScript
Executable File
118 lines
2.9 KiB
TypeScript
Executable File
import { useState } from 'react';
|
|
// @mui
|
|
import { alpha } from '@mui/material/styles';
|
|
import { Box, Divider, Typography, Stack, MenuItem, Avatar } from '@mui/material';
|
|
// components
|
|
import MenuPopover from '../../../components/MenuPopover';
|
|
import { IconButtonAnimate } from '../../../components/animate';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import useAuth from '../../../hooks/useAuth';
|
|
import useLocalStorage from '../../../hooks/useLocalStorage';
|
|
import { enqueueSnackbar } from 'notistack';
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
const MENU_OPTIONS = [
|
|
{
|
|
label: 'Home',
|
|
linkTo: '/',
|
|
},
|
|
{
|
|
label: 'Profile',
|
|
linkTo: '/',
|
|
},
|
|
{
|
|
label: 'Settings',
|
|
linkTo: '/',
|
|
},
|
|
];
|
|
|
|
// ----------------------------------------------------------------------
|
|
|
|
export default function AccountPopover() {
|
|
const [open, setOpen] = useState<HTMLElement | null>(null);
|
|
const navigate = useNavigate();
|
|
const { logout } = useAuth();
|
|
|
|
const handleOpen = (event: React.MouseEvent<HTMLElement>) => {
|
|
setOpen(event.currentTarget);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setOpen(null);
|
|
};
|
|
|
|
const handleLogout = () => {
|
|
logout();
|
|
navigate('/auth/login');
|
|
enqueueSnackbar('Logout Berhasil!', { variant: 'success' });
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<IconButtonAnimate
|
|
onClick={handleOpen}
|
|
sx={{
|
|
p: 0,
|
|
...(open && {
|
|
'&:before': {
|
|
zIndex: 1,
|
|
content: "''",
|
|
width: '100%',
|
|
height: '100%',
|
|
borderRadius: '50%',
|
|
position: 'absolute',
|
|
bgcolor: (theme) => alpha(theme.palette.grey[900], 0.8),
|
|
},
|
|
}),
|
|
}}
|
|
>
|
|
<Avatar
|
|
src="https://minimal-assets-api.vercel.app/assets/images/avatars/avatar_5.jpg"
|
|
alt="Rayan Moran"
|
|
/>
|
|
</IconButtonAnimate>
|
|
|
|
<MenuPopover
|
|
open={Boolean(open)}
|
|
anchorEl={open}
|
|
onClose={handleClose}
|
|
sx={{
|
|
p: 0,
|
|
mt: 1.5,
|
|
ml: 0.75,
|
|
'& .MuiMenuItem-root': {
|
|
typography: 'body2',
|
|
borderRadius: 0.75,
|
|
},
|
|
}}
|
|
>
|
|
<Box sx={{ my: 1.5, px: 2.5 }}>
|
|
<Typography variant="subtitle2" noWrap>
|
|
Rayan Moran
|
|
</Typography>
|
|
<Typography variant="body2" sx={{ color: 'text.secondary' }} noWrap>
|
|
rayan.moran@gmail.com
|
|
</Typography>
|
|
</Box>
|
|
|
|
<Divider sx={{ borderStyle: 'dashed' }} />
|
|
|
|
<Stack sx={{ p: 1 }}>
|
|
{MENU_OPTIONS.map((option) => (
|
|
<MenuItem key={option.label} onClick={handleClose}>
|
|
{option.label}
|
|
</MenuItem>
|
|
))}
|
|
</Stack>
|
|
|
|
<Divider sx={{ borderStyle: 'dashed' }} />
|
|
|
|
<MenuItem sx={{ m: 1 }} onClick={handleLogout}>
|
|
Logout
|
|
</MenuItem>
|
|
</MenuPopover>
|
|
</>
|
|
);
|
|
}
|