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';
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;