Advertisement
alexward1981

Layout Component

Jun 13th, 2016
354
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React from 'react';
  2. import { connect } from 'react-redux';
  3. import Header from '../components/Header.jsx';
  4. import Footer from '../components/Footer.jsx';
  5.  
  6. export default class Layout extends React.Component {
  7.   constructor(props) {
  8.     super(props);
  9.     this.state = {
  10.       showHideNav : 'menu-closed'
  11.     }
  12.     this.toggleNav = this.toggleNav.bind(this);
  13.   }
  14.  
  15.   toggleNav() {
  16.     var css = (this.state.showHideNav === "menu-closed") ? "menu-open" : "menu-closed";
  17.     this.setState({"showHideNav":css});
  18.   }
  19.  
  20.   render() {
  21.     var navState = this.state.showHideNav;
  22.  
  23.     return(
  24.       <div class={'main ' + navState} role="main">
  25.         <span class="header-toggle" onClick={this.toggleNav.bind(this)}><div><span>Menu</span></div></span>
  26.                 <Header />
  27.         <div class="wrapper">
  28.             { this.props.children }
  29.         </div>
  30.         <Footer />
  31.       </div>
  32.     )
  33.   }
  34. }
  35.  
  36. function select(state) {
  37.   const { showHideNav } = state;
  38.   return {
  39.     showHideNav
  40.   };
  41. }
  42.  
  43. export default connect(select)(Layout);
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement