app/src/containers/EventMenu/index.js (view raw)
1import React from 'react';
2import Menu from '@material-ui/core/Menu';
3import Divider from '@material-ui/core/Divider';
4import MenuItem from '@material-ui/core/MenuItem';
5import {makeStyles} from '@material-ui/core/styles';
6import {useTranslation} from 'react-i18next';
7import {useStrapi, useAuth} from 'strapi-react-context';
8
9const EventMenu = ({anchorEl, setAnchorEl, actions = []}) => {
10 const {t} = useTranslation();
11 const strapi = useStrapi();
12 const {logout, authState} = useAuth();
13 const classes = useStyles();
14 const [settings] = strapi.stores?.settings || [{}];
15 const logoutMenuItem = authState?.user
16 ? {label: t('menu.logout'), onClick: logout, id: 'LogoutTabs'}
17 : null;
18 const aboutMenuItem = {
19 label: t('menu.about'),
20 onClick: () => (window.location.href = settings['about_link']),
21 id: 'AboutTabs',
22 };
23
24 return (
25 <Menu
26 anchorEl={anchorEl}
27 anchorOrigin={{
28 vertical: 'top',
29 horizontal: 'right',
30 }}
31 keepMounted
32 transformOrigin={{
33 vertical: 'top',
34 horizontal: 'right',
35 }}
36 open={!!anchorEl}
37 onClose={() => setAnchorEl(null)}
38 >
39 {actions &&
40 [...actions, aboutMenuItem, logoutMenuItem]
41 .filter(Boolean)
42 .map(({label, id, onClick, divider = false, ...attributes}, idx) =>
43 divider ? (
44 <Divider variant="fullWidth" className={classes.divider} />
45 ) : (
46 <MenuItem
47 onClick={() => {
48 onClick();
49 setAnchorEl(null);
50 }}
51 key={idx}
52 id={id || `MenuItem${idx}`}
53 {...attributes}
54 >
55 {label}
56 </MenuItem>
57 )
58 )}
59 </Menu>
60 );
61};
62const useStyles = makeStyles(theme => ({
63 divider: {
64 margin: theme.spacing(1, 0),
65 },
66}));
67export default EventMenu;