import React, { Component } from "react";
import { NavLink } from "react-router-dom";
import "../assets/stylesheets/dropdown.scss";

export default class DropdownContainer extends Component {

  constructor(props){
    super(props);
    this.container = React.createRef();
  }

  toggleHamburger() {
    this.container.current.className = "slideOut c";
    setTimeout(() => {this.props.hamburgerToggle();}
      , 500);
  }

  render() {
    return (
      <nav ref={this.container} className="c slideIn">
        <div className="header">
          <label className="header__text">ITR</label>
          <button className="header__x" onClick={() => this.toggleHamburger()}>X</button>
        </div>
        <div className="dd">
          <li>
            <NavLink className="dd__link" to="/">
              <label className="dd__link_label">Home</label>
              <label className="dd__link_arrow">{">"}</label>
            </NavLink>
          </li>
          <li>
            <NavLink className="dd__link" to="/about">
              <label className="dd__link_label">About</label>
              <label className="dd__link_arrow">{">"}</label>
            </NavLink>
          </li>
          <li>
            <NavLink className="dd__link" to="/projects">
              <label className="dd__link_label">Projects</label>
              <label className="dd__link_arrow">{">"}</label>
            </NavLink>
          </li>
          <li>
            <NavLink className="dd__link" to="/gallery">
              <label className="dd__link_label">Gallery</label>
              <label className="dd__link_arrow">{">"}</label>
            </NavLink>
          </li>
        </div>
      </nav>
    );
  }
}
