{"size": 1103, "ext": "js", "max_stars_repo_path": "src/react-webpack-beginning/App.js", "max_stars_repo_name": "www-vincent-ren/react-transform-boilerplate", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/react-webpack-beginning/App.js", "max_issues_repo_name": "www-vincent-ren/react-transform-boilerplate", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/react-webpack-beginning/App.js", "max_forks_repo_name": "www-vincent-ren/react-transform-boilerplate", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.06, "max_line_length": 82, "alphanum_fraction": 0.5874886673}
import React, { Component } from 'react';
import NavBar from './shared/NavBar';
import LeftNav from './shared/NavBarLeft';
import AppBar from 'material-ui/lib/app-bar';
import './styles/main.scss';

class App extends Component {
  constructor(props){
    super(props);
  }

  componentWillMount(){

    let setNavBarState = function(){
      this.setState({
        renderNavBar: document.body.clientWidth > 1200 ? true :false
      });
    }.bind(this);
    setNavBarState();
    window.onresize = setNavBarState;
  }

  _onLeftIconButtonTouchTap(){
    this.refs.leftNav.handleToggle();
  }
  render(){
    return(
      <div className="app-wrap">
        <LeftNav ref="leftNav" />
        <header>
        {this.state.renderNavBar
        ?
          <NavBar />
        :
          <AppBar
            onLeftIconButtonTouchTap = {this._onLeftIconButtonTouchTap.bind(this)}
            />
        }
        </header>
        <div className="app-content">
        {this.props.children}
        </div>
        <div className="app-footer"> app footer</div>
      </div>
    );
  }
}

export default App;
