material-ui example

App.js

import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import Drawer from './drawer'
import Navbar from './navbar'
import Login from './login'
import Feed from './feed_basic'

const drawerWidth = 216;

const styles = theme => ({
  narrowContainer: {
    width: `calc(100% - ${drawerWidth}px)`,
    marginLeft: `${drawerWidth}px`,
    transition: theme.transitions.create(['margin', 'width'], {
      easing: theme.transitions.easing.easeOut,
      duration: theme.transitions.duration.enteringScreen,
    })
  }
})

class App extends Component {
  state = {drawer: false, login: false}
  
  toggleDrawer = () => {this.setState( {...this.state, drawer: !this.state.drawer } ) }
  toggleLogin = () => {this.setState( {...this.state, login: !this.state.login } ) }
  
  render() {
    const {classes} = this.props;

    return (
      <div>
        { this.state.login && <Login toggleLogin={this.toggleLogin}/> }
        <Drawer open={this.state.drawer} toggleDrawer={this.toggleDrawer}/>
        <div className={this.state.drawer ? classes.narrowContainer : null}>
          <Navbar open={this.state.drawer} toggleDrawer={this.toggleDrawer} login={this.toggleLogin}/>
          <Feed/>
        </div>
      </div>
    );
  }
}

export default withStyles(styles)(App);