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';
9const GenericMenu = ({title, actions = []}) => {
10 const [anchorEl, setAnchorEl] = useState(null);
11 const classes = useStyles();
12 const validActions = useMemo(() => actions.filter(Boolean), [actions]);
13 useEffect(() => {
14 window.scrollTo(0, 0);
15 }, []);
16
17 return (
18 <AppBar
19 position="static"
20 color="primary"
21 className={classes.appbar}
22 id="Menu"
23 >
24 <Toolbar>
25 <div className={classes.name}>
26 <Typography variant="h6" noWrap id="MenuHeaderTitle">
27 {title}
28 </Typography>
29 </div>
30 {validActions.length > 0 && (
31 <>
32 <IconButton
33 color="inherit"
34 edge="end"
35 id="MenuMoreInfo"
36 onClick={e => setAnchorEl(e.currentTarget)}
37 >
38 <Icon>more_vert</Icon>
39 </IconButton>
40
41 <GenericToolbar
42 anchorEl={anchorEl}
43 setAnchorEl={setAnchorEl}
44 actions={validActions}
45 />
46 </>
47 )}
48 </Toolbar>
49 </AppBar>
50 );
51};
52
53const useStyles = makeStyles(theme => ({
54 container: {
55 padding: theme.spacing(2),
56 },
57 appbar: {
58 overflow: 'hidden',
59 height: theme.mixins.toolbar.minHeight,
60 transition: 'height 0.3s ease',
61 zIndex: theme.zIndex.appBar,
62 position: 'fixed',
63 top: 0,
64 },
65 name: {
66 flexGrow: 1,
67 display: 'flex',
68 alignItems: 'center',
69 },
70 shareIcon: {
71 marginRight: theme.spacing(0),
72 },
73}));
74
75export default GenericMenu;