app/src/containers/EventFab/index.js (view raw)
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;