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