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