test.jsx

import React from 'react';
import AppBar from 'material-ui/lib/app-bar';
import RaisedButton from 'material-ui/lib/raised-button';

import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';
import MyTheme from '../theme';

import LeftNav from 'material-ui/lib/left-nav';
import Divider from 'material-ui/lib/divider';
import IconButton from 'material-ui/lib/icon-button';
import IconMenu from 'material-ui/lib/menus/icon-menu';
import MenuItem from 'material-ui/lib/menus/menu-item';
import Subheader from 'material-ui/lib/Subheader';

import ArrowBackIcon from 'material-ui/lib/svg-icons/navigation/arrow-back';
import RefreshIcon from 'material-ui/lib/svg-icons/navigation/refresh';
import HelpIcon from 'material-ui/lib/svg-icons/action/help';
import SettingsIcon from 'material-ui/lib/svg-icons/action/settings';
import MenuIcon from 'material-ui/lib/svg-icons/navigation/menu';
import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert';
import NavigationCloseIcon from 'material-ui/lib/svg-icons/navigation/close';

import VideoLibraryIcon from 'material-ui/lib/svg-icons/av/video-library';
import PhotoLibraryIcon from 'material-ui/lib/svg-icons/image/photo-library';

export default class Sample extends React.Component {

    constructor(props) {
        super(...arguments);

        this.state = {open: false};
        this.handleToggle = this.handleToggle.bind(this);

        // In ES7 this would be a member `static childContextTypes = ...'
        this.constructor.childContextTypes = {
            muiTheme: React.PropTypes.object,
        }
    }

    getChildContext() {
        return {
            muiTheme: getMuiTheme(MyTheme),
        };
    }

    handleToggle() {
        this.setState({open: !this.state.open});
    }

    render () {
        return (
            <div>
            <AppBar
                title="EPIC SlideDeck&reg;"
                id="app-bar"
                iconElementLeft={
                    <IconButton onTouchTap={this.handleToggle}><MenuIcon/></IconButton>
                }
                iconElementRight={
                    <IconMenu
                        iconButtonElement={
                            <IconButton><MoreVertIcon/></IconButton>
                        }
                        targetOrigin={{horizontal: 'right', vertical: 'top'}}
                        anchorOrigin={{horizontal: 'right', vertical: 'top'}}>

                        <MenuItem primaryText="Refresh" leftIcon={<RefreshIcon/>}/>
                        <Divider/>
                        <MenuItem primaryText="Help" leftIcon={<HelpIcon/>}/>
                        <MenuItem primaryText="Settings" leftIcon={<SettingsIcon/>}/>

                    </IconMenu>
            }/>
            <LeftNav
                open={this.state.open}
                docked={false}
                onRequestChange={open => this.setState({open})}>

                <AppBar
                    title="Menu"
                    showMenuIconButton={false}
                    iconElementRight={
                        <IconButton onTouchTap={this.handleToggle}><NavigationCloseIcon/></IconButton>
                    }
                />

                <Subheader>Library</Subheader>
                <MenuItem primaryText="Presentations" leftIcon={<VideoLibraryIcon/>}/>
                <MenuItem primaryText="Slides" leftIcon={<PhotoLibraryIcon/>}/>
                <Divider/>

                <Subheader>System</Subheader>
                <MenuItem primaryText="Settings" leftIcon={<SettingsIcon/>}/>
                <MenuItem primaryText="Help" leftIcon={<HelpIcon/>}/>
            </LeftNav>
            </div>
        );
    }
}