AddressMaterialOld

React Material Bits and Pieces

DON’T EDIT. COMPARE THIS TO REACT ADDRESS MATERIAL.

The Goal is to add Material-UI to our application to gussy up the menu and give our app a more standard appearance.

IMAGE: Git Explorer with an AppBar on top

IMAGE: Git Explorer with the menu open. We combine a Material-UI AppBar and Drawer to make the menu.

Get Started

Link in Material-UI.

npm install --save material-ui

I’m not sure this is necessary, and of course we not using Pug in this project:

link(rel="stylesheet", href="https://fonts.googleapis.com/css?family=Roboto:300,400,500")
link(rel="stylesheet", href="https://fonts.googleapis.com/icon?family=Material+Icons")

Create Menu

In ElfHeader:

import AppBar from 'material-ui/AppBar';
import Drawer from 'material-ui/Drawer';

In the render method:

<AppBar
	title="GitExplorer"
	iconClassNameRight="muidocs-icon-navigation-expand-more"
	onLeftIconButtonClick={this.handleToggle}
/>

A method of ElfHeader:

constructor(props) {
	super(props);
	this.state = {
	open: false
	};
}

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

The render method has a couple Material-UI AppBars, MenuItems and a Drawer:

<div>
    <AppBar
        title="GitExplorer"
        iconClassNameRight="muidocs-icon-navigation-expand-more"
        onLeftIconButtonClick={this.handleToggle}
    />
    <Drawer
        docked={false}
        width={200}
        open={this.state.open}
        onRequestChange={this.handleToggle}
    >
        <AppBar title="Git Explorer"/>


        <MenuItem
            primaryText='Git User'
            containerElement={<Link to="/"/>}
            onClick={this.handleToggle}
        />
        // MORE MENU ITEMS HERE
    </Drawer>
</div>