1import React, {useState, useEffect, useMemo, useCallback} 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';
 11import {useHistory} from 'react-router-dom';
 12const GenericMenu = ({title, actions = []}) => {
 13  const {t} = useTranslation();
 14  const history = useHistory();
 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  };
 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        <IconButton
 39          edge="start"
 40          className={classes.goBack}
 41          onClick={() =>
 42            history.length > 2 ? history.goBack() : history.push('/dashboard')
 43          }
 44        >
 45          <Icon>arrow_back</Icon>
 46        </IconButton>
 47        <div className={classes.name}>
 48          <Typography variant="h6" noWrap id="MenuHeaderTitle">
 49            {title}
 50          </Typography>
 51        </div>
 52        {validActions.length > 0 && (
 53          <>
 54            <IconButton
 55              color="inherit"
 56              edge="end"
 57              id="MenuMoreInfo"
 58              onClick={e => setAnchorEl(e.currentTarget)}
 59            >
 60              <Icon>more_vert</Icon>
 61            </IconButton>
 62
 63            <GenericToolbar
 64              anchorEl={anchorEl}
 65              setAnchorEl={setAnchorEl}
 66              actions={[...validActions, aboutMenuItem]}
 67            />
 68          </>
 69        )}
 70      </Toolbar>
 71    </AppBar>
 72  );
 73};
 74
 75const useStyles = makeStyles(theme => ({
 76  container: {
 77    padding: theme.spacing(2),
 78  },
 79  appbar: {
 80    overflow: 'hidden',
 81    height: theme.mixins.toolbar.minHeight,
 82    transition: 'height 0.3s ease',
 83    zIndex: theme.zIndex.appBar,
 84    position: 'fixed',
 85    top: 0,
 86  },
 87  name: {
 88    flexGrow: 1,
 89    display: 'flex',
 90    alignItems: 'center',
 91  },
 92  shareIcon: {
 93    marginRight: theme.spacing(0),
 94  },
 95  goBack: {
 96    color: theme.palette.background.paper,
 97  },
 98}));
 99
100export default GenericMenu;