I'm currently facing challenges in my Meteor app while trying to incorporate SSR and using the Drawer component from MaterialUI with an onClick event handler.
If anyone has any boilerplate or examples that could help, I would greatly appreciate it.
Here are the versions I am using:
@material-ui/core: 3.1.1
@material-ui/icons: 3.0.1
This is how I have implemented the Drawer so far:
const Header = props => {
const { classes, handleDrawerToggle, mobileOpen } = props
return (
<div>
<StyledAppBar>
<TopBorders>
<div />
<div />
<div />
<div />
</TopBorders>
<Grid container justify="center">
<Grid item lg={9} md={10} sm={9} xs={12}>
<Toolbar>
<div style={{ flex: 1 }}>
<Link to="/">
<LogoImage src="/img/Logo.png" alt="Drone Pilot" />
</Link>
</div>
<div>
<Hidden mdUp implementation="css">
<IconButton
aria-label="open drawer"
onClick={() => handleDrawerToggle(!mobileOpen)}
>
<MenuIcon />
</IconButton>
</Hidden>
<Hidden smDown implementation="css">
<NavItem />
</Hidden>
</div>
</Toolbar>
</Grid>
</Grid>
</StyledAppBar>
<Drawer
variant="temporary"
anchor="right"
open={mobileOpen}
onClose={() => handleDrawerToggle()}
ModalProps={{
keepMounted: true, // Better open performance on mobile.
}}
classes={{
paper: classes.drawerPaper,
}}
>
<NavItem />
</Drawer>
</div>
)
}
const mapStateToProps = state => ({
mobileOpen: state.mainReducer.mobileOpen,
})
function mapDispatchToProps(dispatch) {
return bindActionCreators(ActionCreators, dispatch)
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(withStyles(styles)(Header))