import React, { Component } from 'react';
import '../App.css';
import Nav from './Nav.js';
import Main from '../Main.js'

class Wrapper extends Component{
  constructor(props){
    super(props);
    this.state = {
      sidebarOpen: false,
    }
    this.handleTouch = this.handleTouch.bind(this)
    this.menuCollapse = this.menuCollapse.bind(this)
  }

  handleTouch(){
    this.setState({sidebarOpen: !this.state.sidebarOpen})
  }

  menuCollapse(){
    if(this.state.sidebarOpen){
      this.setState({sidebarOpen: false})
    }
  }

  render() {

    let headerClass = this.state.sidebarOpen ? "header open" : "header"

    return (
      <div className="body">
        <header className={headerClass}>
          <div className="navIcon">
            <a onClick={this.handleTouch}>
              &#9776;
            </a>
            <h2 className="topElement">Stuff</h2>
          </div>
          <div className="appName">
            <h2>App Name</h2>
          </div>
        </header>
        <div className="flex-container">
          <Main isOpen={this.state.sidebarOpen} onClick={this.menuCollapse} />
          <Nav isOpen={this.state.sidebarOpen} onClick={this.menuCollapse} />
        </div>
      </div>
    );
  }
}

export default Wrapper;
@@ -115,16 +115,31 @@
 in.js'%0A%0A
+export default 
 class Wr
@@ -167,57 +167,11 @@
 nt%7B%0A
+%0A
   
-constructor(props)%7B%0A    super(props);%0A    this.
 stat
@@ -175,23 +175,16 @@
 tate = %7B
-%0A      
 sidebarO
@@ -197,159 +197,66 @@
 alse
-,%0A    %7D%0A    this.handleTouch = this.handleTouch.bind(this)%0A    this.menuCollapse = this.menuCollapse.bind(this)%0A  %7D%0A%0A  handleTouch()%7B%0A    this.set
+%7D%0A%0A  handleTouch = () =%3E %7B%0A    this.setState(prev
 State
+ =%3E 
 (%7Bsi
@@ -267,22 +267,21 @@
 rOpen: !
-this.s
+prevS
 tate.sid
@@ -290,16 +290,17 @@
 arOpen%7D)
+)
 %0A  %7D%0A%0A  
@@ -311,18 +311,25 @@
 Collapse
-()
+ = () =%3E 
 %7B%0A    if
@@ -1105,29 +1105,4 @@
  %7D%0A%7D
-%0A%0Aexport default Wrapper;

refactor to not use constructor