{"size": 1486, "ext": "js", "max_stars_repo_path": "src/components/Header.js", "max_stars_repo_name": "jdbohrman/gatsby-style-guide-guide", "max_stars_repo_stars_event_min_datetime": "2018-06-13T15:13:54.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-05T03:49:03.000Z", "max_issues_repo_path": "src/components/Header.js", "max_issues_repo_name": "jdbohrman/gatsby-style-guide-guide", "max_issues_repo_issues_event_min_datetime": "2018-06-14T10:04:04.000Z", "max_issues_repo_issues_event_max_datetime": "2021-03-25T16:43:54.000Z", "max_forks_repo_path": "src/components/Header.js", "max_forks_repo_name": "jdbohrman/gatsby-style-guide-guide", "max_forks_repo_forks_event_min_datetime": "2018-06-13T20:06:25.000Z", "max_forks_repo_forks_event_max_datetime": "2021-12-17T01:08:22.000Z"}
{"max_stars_count": 486, "max_issues_count": 12, "max_forks_count": 39, "avg_line_length": 26.5357142857, "max_line_length": 78, "alphanum_fraction": 0.5693135935}
import React, { Component } from 'react'
import classnames from 'classnames'
import Logo from './Logo'
import Button from './Button'
import PrimaryNav from './PrimaryNav'

export class Header extends Component {
  constructor(props) {
    super(props)
    this.state = { isToggleOn: true }
    this.toggleMenu = this.toggleMenu.bind(this)
  }

  toggleMenu() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn,
    }))
  }

  render() {
    let headerClass = classnames({
      'c-header': true,
      'ads-u-margin-bottom-none':
        this.props.styleModifier === 'ads-u-margin-bottom-none',
      'c-header--vertical': this.props.styleModifier === 'c-header--vertical',
    })

    return (
      <header className={headerClass} status="Complete" role="banner">
        <div className="c-header__inner">
          <Logo siteTitle={this.props.siteTitle} />
          <Button
            styleModifier="c-btn--small c-header__nav-btn"
            text={this.state.isToggleOn ? 'Menu' : 'Close'}
            onClickHandler={this.toggleMenu}
          />
          <div
            className={
              this.state.isToggleOn
                ? 'c-header__nav-container'
                : 'c-header__nav-container is-active'
            }
          >
            <PrimaryNav
              data={this.props.navData}
              toggleStatus={this.toggleMenu}
            />
          </div>
        </div>
      </header>
    )
  }
}

export default Header
