I am playing round with App Bar and Drawer Components in Material-UI. Whenever I click on Hamburger menu in App Bar the Drawer toggles. But my Hamburger icon is like completely covered. So if i want my Drawer menu to toggle out I have to refresh the page. My Components are as follows:
App.js
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div className="App">
<AppBarComponent />
</div>
</MuiThemeProvider>
);
}
}
AppBarComponent.js
class AppBarComponent extends React.Component {
constructor(props) {
super(props);
this.state = { open: false };
}
handleToggle = () => this.setState({ open: !this.state.open });
render() {
return (
<div>
<AppBar title="App Bar Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
onLeftIconButtonClick={this.handleToggle}
/>
<Drawer open={this.state.open}>
<MenuItem>Menu Item 1</MenuItem>
<MenuItem>Menu Item 2</MenuItem>
</Drawer>
</div>
);
}
};
export default AppBarComponent;
Whenever i click on the hamburger menu the drawer toggles as:
As we can see that the hamburger menu is complety covered. How can i make the App Bar component responsive? Do I have to write css class manually or is there any way to tweak it?