all repos — caroster @ 7f378db1a463f777b274446840456613c75fe547

[Octree] Group carpool to your event https://caroster.io

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;