Materialize-ui navigation menu - navbar

Question

How to fill navigation menu, so when it's clicked on the icon on the left (like mobile menu), a drop down menu appears?
/**
* A simple example of `AppBar` with an icon on the right.
* By default, the left icon is a navigation-menu.
*/
const AppBarExampleIcon = () => (
<AppBar
title="Title"
/>
);

Answer 1

you can try this. this is just an example from http://www.material-ui.com/#/components/app-bar
import React, {Component} from 'react';
import AppBar from 'material-ui/AppBar';
import IconButton from 'material-ui/IconButton';
import IconMenu from 'material-ui/IconMenu';
import MenuItem from 'material-ui/MenuItem';
import FlatButton from 'material-ui/FlatButton';
import Toggle from 'material-ui/Toggle';
import MoreVertIcon from 'material-ui/svg-icons/navigation/more-vert';
import NavigationClose from 'material-ui/svg-icons/navigation/close';
class Login extends Component {
static muiName = 'FlatButton';
render() {
return (
<FlatButton {...this.props} label="Login" />
);
}
}
const Logged = (props) => (
<IconMenu
{...props}
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
);
Logged.muiName = 'IconMenu';
/**
* This example is taking advantage of the composability of the `AppBar`
* to render different components depending on the application state.
*/
class AppBarExampleComposition extends Component {
state = {
logged: true,
};
handleChange = (event, logged) => {
this.setState({logged: logged});
};
render() {
return (
<div>
<Toggle
label="Logged"
defaultToggled={true}
onToggle={this.handleChange}
labelPosition="right"
style={{margin: 20}}
/>
<AppBar
title="Title"
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={this.state.logged ? <Logged /> : <Login />}
/>
</div>
);
}
}
export default AppBarExampleComposition;
just tweak iconElementLeft={this.state.logged ? <Logged /> : <Login />}