1import React, {useState, useEffect, useMemo} from 'react';
 2import AppBar from '@material-ui/core/AppBar';
 3import Toolbar from '@material-ui/core/Toolbar';
 4import Typography from '@material-ui/core/Typography';
 5import IconButton from '@material-ui/core/IconButton';
 6import Icon from '@material-ui/core/Icon';
 7import {makeStyles} from '@material-ui/core/styles';
 8import GenericToolbar from './Toolbar';
 9import {useTranslation} from 'react-i18next';
10import {useStrapi, useAuth} from 'strapi-react-context';
11
12const GenericMenu = ({title, actions = []}) => {
13  const {t} = useTranslation();
14  const [anchorEl, setAnchorEl] = useState(null);
15  const classes = useStyles();
16  const strapi = useStrapi();
17  const {logout, authState} = useAuth();
18  const [settings] = strapi.stores?.settings || [{}];
19  const validActions = useMemo(() => actions.filter(Boolean), [actions]);
20
21  const logoutMenuItem = authState?.user
22    ? {label: t('menu.logout'), onClick: logout, id: 'LogoutTabs'}
23    : null;
24  const aboutMenuItem = {
25    label: t('menu.about'),
26    onClick: () => (window.location.href = settings['about_link']),
27    id: 'AboutTabs',
28    className: classes.withDivider,
29  };
30  useEffect(() => {
31    window.scrollTo(0, 0);
32  }, []);
33
34  return (
35    <AppBar
36      position="static"
37      color="primary"
38      className={classes.appbar}
39      id="Menu"
40    >
41      <Toolbar>
42        <div className={classes.name}>
43          <Typography variant="h6" noWrap id="MenuHeaderTitle">
44            {title}
45          </Typography>
46        </div>
47        {validActions.length > 0 && (
48          <>
49            <IconButton
50              color="inherit"
51              edge="end"
52              id="MenuMoreInfo"
53              onClick={e => setAnchorEl(e.currentTarget)}
54            >
55              <Icon>more_vert</Icon>
56            </IconButton>
57
58            <GenericToolbar
59              anchorEl={anchorEl}
60              setAnchorEl={setAnchorEl}
61              actions={[...validActions, aboutMenuItem, logoutMenuItem].filter(
62                Boolean
63              )}
64            />
65          </>
66        )}
67      </Toolbar>
68    </AppBar>
69  );
70};
71
72const useStyles = makeStyles(theme => ({
73  container: {
74    padding: theme.spacing(2),
75  },
76  appbar: {
77    overflow: 'hidden',
78    height: theme.mixins.toolbar.minHeight,
79    transition: 'height 0.3s ease',
80    zIndex: theme.zIndex.appBar,
81    position: 'fixed',
82    top: 0,
83  },
84  name: {
85    flexGrow: 1,
86    display: 'flex',
87    alignItems: 'center',
88  },
89  shareIcon: {
90    marginRight: theme.spacing(0),
91  },
92  withDivider: {
93    borderTop: `1px solid ${theme.palette.divider}`,
94  },
95}));
96
97export default GenericMenu;