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