{"size": 1293, "ext": "js", "max_stars_repo_path": "src/components/Header/Header.js", "max_stars_repo_name": "senthilanravee/barber-gatsby", "max_stars_repo_stars_event_min_datetime": "2018-11-11T00:05:47.000Z", "max_stars_repo_stars_event_max_datetime": "2021-03-02T14:08:24.000Z", "max_issues_repo_path": "src/components/Header/Header.js", "max_issues_repo_name": "senthilanravee/barber-gatsby", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Header/Header.js", "max_forks_repo_name": "senthilanravee/barber-gatsby", "max_forks_repo_forks_event_min_datetime": "2019-02-01T21:52:48.000Z", "max_forks_repo_forks_event_max_datetime": "2021-02-08T14:58:11.000Z"}
{"max_stars_count": 6, "max_issues_count": null, "max_forks_count": 4, "avg_line_length": 26.9375, "max_line_length": 114, "alphanum_fraction": 0.4895591647}
// ----------------------------------------------
// Imports
// ----------------------------------------------
import React, { Component } from 'react';
import { Link } from 'gatsby';

import Contact from '../Contact/Contact';
import Popup from '../Popup/Popup';

import styles from './Header.module.scss';

// ----------------------------------------------
// Header
// ----------------------------------------------
export default class Header extends Component {
  constructor(props) {
    super(props);

    this.toggleContact = this.toggleContact.bind(this);
  }

  toggleContact() {
    this.popup.togglePopup();
  }

  render() {
    return (
      <div>
        <header className={styles.header}>
          <Link className={styles.header__title} to="/">{this.props.siteTitle}</Link>

          <nav>
            <ul className={styles.header__list}>
              <li><Link to="/">Stories</Link></li>
              <li><Link to="/style-guide">Style Guide</Link></li>
              <li><span className={styles.header__toggle} onClick={e => this.toggleContact(e)}>Contact</span></li>
            </ul>
          </nav>
        </header>

        <Popup ref={popup => this.popup = popup}>
          <Contact toggleContact={this.toggleContact} />
        </Popup>
      </div>
    );
  }
}
