1import React from 'react';
 2import Icon from '@material-ui/core/Icon';
 3import Fab from '@material-ui/core/Fab';
 4import {makeStyles} from '@material-ui/core/styles';
 5
 6const EventFab = ({toggleNewCar, open}) => {
 7  const classes = useStyles({open});
 8
 9  return (
10    <div className={classes.container}>
11      <Fab color="secondary" aria-label="add-car" onClick={toggleNewCar}>
12        <Icon>add</Icon>
13      </Fab>
14    </div>
15  );
16};
17
18const useStyles = makeStyles(theme => ({
19  container: ({open}) => ({
20    position: 'fixed',
21    bottom: open ? -theme.spacing(8) : theme.spacing(3),
22    right: theme.spacing(3),
23    transition: 'all 0.3s ease',
24    transform: open ? 'rotate(45deg)' : '',
25    zIndex: theme.zIndex.speedDial,
26  }),
27}));
28
29export default EventFab;