content: import React from 'react';
  
  import './header.css';
  import styled from 'styled-components';
  
  const MenuItemsContainer = styled.div`
    display: block;
  `
  
  class Header extends React.Component { // eslint-disable-line react/prefer-stateless-function
    componentWillMount = () => {
      this.state = {
        showMenu: false
      }
    }
    toggleMenu = () => {
      let newState = !this.state.showMenu
      this.setState({
        showMenu: newState
      })
    }
  
    render() {
      const path = window.location.pathname.split('/');
      const currentPath = path[path.length-1];
      return (
        <div>
          <nav className="navbar navbar-inverse">
            <div className="navbar-header">
              <button type="button" className="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false" onClick={this.toggleMenu}>
                <span className="sr-only">Toggle navigation</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
              </button>
              <a className="navbar-brand" href="/">math-is-hard</a>
            </div>
  
            <MenuItemsContainer className={"collapse navbar-collapse" + (this.state.showMenu? " menu-out" : ' menu-in')} id="menu-items">
              <ul className="nav navbar-nav">
                <li className={currentPath == ''? 'active': ''}><a href="/">HOME <span className="sr-only">(current)</span></a></li>
                <li className={currentPath === 'about'? 'active': ''}><a href="/about">ABOUT</a></li>
              </ul>
            </MenuItemsContainer>
          </nav>
        </div>
      );
    }
  }
  
  export default Header;
  