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