import React from 'react';
import Hamburger from './Hamburger';
import NavList from './NavList';

class Navigation extends React.Component {
  constructor(props) {
    super(props);
    this.state = { open: false };
  }

  componentDidMount() {
    window.addEventListener('keydown', this.handleKey, true);
  }

  componentWillUnmount() {
    window.removeEventListener('keydown', this.handleKey, true);
  }

  handleKey = e => {
    if (e.keyCode === 27) {
      this.setState({ open: false });
    }
  };

  toggleClass = () => {
    this.setState({ open: !this.state.open });
  };

  blockClicks = e => {
    if (e.target.tagName !== 'A') {
      e.stopPropagation();
    }
  };

  render() {
    const { open } = this.state;
    return (
      <nav className={open ? 'open' : ''} onClick={this.toggleClass}>
        <Hamburger onClick={this.toggleClass} open={open} />
        <NavList blockClicks={this.blockClicks} />
        <style jsx>{`
          nav::before {
            content: '';
            background: rgba(0, 0, 0, 0.4);
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            visibility: hidden;
            opacity: 0;
            transition: 500ms all ease-in-out;
            will-change: opacity;
          }
          nav.open::before {
            visibility: visible;
            opacity: 1;
          }
        `}</style>
      </nav>
    );
  }
}

export default Navigation;

@@ -140,56 +140,8 @@
 %7B%0A  
-constructor(props) %7B%0A    super(props);%0A    this.
 stat
@@ -145,16 +145,20 @@
 tate = %7B
+%0A   
  open: f
@@ -165,15 +165,13 @@
 alse
- %7D;
 %0A  %7D
+;
 %0A%0A  

remove Navigation constructor