{"size": 2342, "ext": "js", "max_stars_repo_path": "src/components/header.js", "max_stars_repo_name": "romkravets/react-temp-start", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/header.js", "max_issues_repo_name": "romkravets/react-temp-start", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/header.js", "max_forks_repo_name": "romkravets/react-temp-start", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.0943396226, "max_line_length": 79, "alphanum_fraction": 0.5281810418}
import PropTypes from "prop-types"
import React from "react"
import { Link } from "gatsby"

class Header extends React.Component {
  constructor() {
    super()
    this.toggleMenu = this.toggleMenu.bind(this)
    this.toggleLinks = this.toggleLinks.bind(this)
    this.state = {
      isOpened: false,
      menu: [],
    }
    this.fetchMenus()
  }
  fetchMenus() {
    setTimeout(() => {
      this.setState(oldState => {
        const newState = Object.assign({}, oldState)
        newState.menu = [
          {
            title: "Home",
            href: "/",
          },
          {
            title: "About",
            href: "/about",
          },
          {
            title: "Contact",
            href: "/contact",
          },
        ]
        return newState
      })
    }, 0)
  }

  toggleMenu() {
    this.setState(oldState => {
      const newState = Object.assign({}, oldState)
      newState.isOpened = !oldState.isOpened
      return newState
    })
  }

  toggleLinks() {
    this.setState(oldState => {
      const newState = Object.assign({}, oldState)
      newState.isOpened = !oldState.isOpened
      return newState
    })
  }

  render() {
    let classMain = "menu "
    let classBranding = "menu-branding "
    let classMenuNav = "menu-nav "
    let classBtn = "menu-btn "
    let navItem = "nav-item "

    if (this.state.isOpened) {
      classMain += "show"
      classBranding += "show"
      classMenuNav += "show"
      classBtn += "close"
      navItem += "show"
    }

    const listItems = this.state.menu.map((item, i) => {
      return (
        <li key={i} className={navItem}>
          <Link className="nav-link" to={item.href} onClick={this.toggleLinks}>
            <span>{item.title}</span>
          </Link>
        </li>
      )
    })

    return (
      <header>
        <div className={classBtn} onClick={this.toggleMenu}>
          <div className="btn-line"></div>
          <div className="btn-line"></div>
          <div className="btn-line"></div>
        </div>
        <div className={classMain}>
          <div className={classBranding}>
          </div>
          <ul className={classMenuNav}>{listItems}</ul>
        </div>
      </header>
    )
  }
}

Header.propTypes = {
  siteTitle: PropTypes.string,
}

Header.defaultProps = {
  siteTitle: ``,
}

export default Header
