I am having an issue I can't seem to pin down where my LeftDrawer for my App Bar isn't closing if I click a menu item or the overlay (Not sure if this is an option, or possible with react components). Ideally, I would like both options to close the Drawer. Thank you in advance for taking your time to look at this!
This is my Navbar class I am using to toggle open the LeftDrawer:
// Dependencies
import React from 'react';
//Comonents
import LeftDrawer from './left-drawer.jsx';
// Styles
import './nav-bar.scss';
import AppBar from 'material-ui/AppBar';
class NavBar extends React.Component {
constructor(props){
super(props);
this.state = {
open: false
};
}
toggleDrawer(){
this.setState({
open: !this.state.open
});
}
render(){
return (
<div className='nav-bar'>
<AppBar title='My App' onLeftIconButtonTouchTap={() => this.toggleDrawer()}/>
<LeftDrawer open={this.state.open} onToggleDrawer={this.toggleDrawer.bind(this)} />
</div>
);
}
}
export default NavBar;
This is the LeftDrawer class with the MenuItems:
// Dependencies
import React from 'react';
import { Link } from 'react-router-dom';
// Styles
import Drawer from 'material-ui/Drawer';
import MenuItem from 'material-ui/MenuItem';
export default class LeftDrawer extends React.Component {
constructor(props) {
super(props);
this.state = {open: false};
}
handleToggle() {
this.setState({open: !this.state.open});
}
handleClose() {
this.setState({open: false});
}
render() {
return (
<div>
<Drawer
docked={false}
width={200}
open={this.props.open}
onRequestChange={(open) => this.setState({open})}
>
<Link to="/home"><MenuItem onTouchTap={this.handleClose.bind(this)}>Home</MenuItem></Link>
<Link to="/topics"><MenuItem onTouchTap={this.handleClose.bind(this)}>404</MenuItem></Link>
</Drawer>
</div>
);
}
}