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} 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 [settings] = strapi.stores?.settings || [{}];
18  const validActions = useMemo(() => actions.filter(Boolean), [actions]);
19
20  const aboutMenuItem = {
21    label: t('menu.about'),
22    onClick: () => (window.location.href = settings['about_link']),
23    id: 'AboutTabs',
24  };
25
26  useEffect(() => {
27    window.scrollTo(0, 0);
28  }, []);
29
30  return (
31    <AppBar
32      position="static"
33      color="primary"
34      className={classes.appbar}
35      id="Menu"
36    >
37      <Toolbar>
38        <div className={classes.name}>
39          <Typography variant="h6" noWrap id="MenuHeaderTitle">
40            {title}
41          </Typography>
42        </div>
43        {validActions.length > 0 && (
44          <>
45            <IconButton
46              color="inherit"
47              edge="end"
48              id="MenuMoreInfo"
49              onClick={e => setAnchorEl(e.currentTarget)}
50            >
51              <Icon>more_vert</Icon>
52            </IconButton>
53
54            <GenericToolbar
55              anchorEl={anchorEl}
56              setAnchorEl={setAnchorEl}
57              actions={[...validActions, aboutMenuItem]}
58            />
59          </>
60        )}
61      </Toolbar>
62    </AppBar>
63  );
64};
65
66const useStyles = makeStyles(theme => ({
67  container: {
68    padding: theme.spacing(2),
69  },
70  appbar: {
71    overflow: 'hidden',
72    height: theme.mixins.toolbar.minHeight,
73    transition: 'height 0.3s ease',
74    zIndex: theme.zIndex.appBar,
75    position: 'fixed',
76    top: 0,
77  },
78  name: {
79    flexGrow: 1,
80    display: 'flex',
81    alignItems: 'center',
82  },
83  shareIcon: {
84    marginRight: theme.spacing(0),
85  },
86}));
87
88export default GenericMenu;