app/src/containers/GenericMenu/index.js (view raw)
1import React, {useState, useEffect, useMemo} from 'react';
2import AppBar from '@material-ui/core/AppBar';
3import Divider from '@material-ui/core/Divider';
4import Toolbar from '@material-ui/core/Toolbar';
5import Typography from '@material-ui/core/Typography';
6import IconButton from '@material-ui/core/IconButton';
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} 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 [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 className: classes.withDivider,
26 };
27
28 useEffect(() => {
29 window.scrollTo(0, 0);
30 }, []);
31
32 return (
33 <AppBar
34 position="static"
35 color="primary"
36 className={classes.appbar}
37 id="Menu"
38 >
39 <Toolbar>
40 <div className={classes.name}>
41 <Typography variant="h6" noWrap id="MenuHeaderTitle">
42 {title}
43 </Typography>
44 </div>
45 {validActions.length > 0 && (
46 <>
47 <IconButton
48 color="inherit"
49 edge="end"
50 id="MenuMoreInfo"
51 onClick={e => setAnchorEl(e.currentTarget)}
52 >
53 <Icon>more_vert</Icon>
54 </IconButton>
55
56 <GenericToolbar
57 anchorEl={anchorEl}
58 setAnchorEl={setAnchorEl}
59 actions={[...validActions, aboutMenuItem]}
60 />
61 </>
62 )}
63 </Toolbar>
64 </AppBar>
65 );
66};
67
68const useStyles = makeStyles(theme => ({
69 container: {
70 padding: theme.spacing(2),
71 },
72 appbar: {
73 overflow: 'hidden',
74 height: theme.mixins.toolbar.minHeight,
75 transition: 'height 0.3s ease',
76 zIndex: theme.zIndex.appBar,
77 position: 'fixed',
78 top: 0,
79 },
80 name: {
81 flexGrow: 1,
82 display: 'flex',
83 alignItems: 'center',
84 },
85 shareIcon: {
86 marginRight: theme.spacing(0),
87 },
88 withDivider: {
89 borderTop: `1px solid ${theme.palette.divider}`,
90 },
91}));
92
93export default GenericMenu;