app/src/containers/GenericMenu/index.js (view raw)
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;