{"size": 851, "ext": "js", "max_stars_repo_path": "src/components/header.js", "max_stars_repo_name": "kend77/stephanie-portfolio", "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": "kend77/stephanie-portfolio", "max_issues_repo_issues_event_min_datetime": "2021-05-11T20:12:10.000Z", "max_issues_repo_issues_event_max_datetime": "2022-02-27T08:26:51.000Z", "max_forks_repo_path": "src/components/header.js", "max_forks_repo_name": "kend77/stephanie-portfolio", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 5, "max_forks_count": null, "avg_line_length": 21.8205128205, "max_line_length": 66, "alphanum_fraction": 0.5875440658}
import React, { useState, useEffect } from "react"
import Image from "./logo"
import { Link } from "gatsby"
import AboutMeNavItems from "./aboutmeNavItems"
import { useWindowInnerWidth } from "../utils/useWindowInnerWidth"

import "./header.css"

function Header() {
  const [showAboutMe, setShowAboutMe] = useState(true)

  const width = useWindowInnerWidth()
  useEffect(() => {
    if (width < 600) {
      setShowAboutMe(false)
    } else {
      setShowAboutMe(true)
    }
  })
  return (
    <header className="header">
      <Link to="/">
        <div className="header__logo">
          <Image />
        </div>
      </Link>
      {showAboutMe && (
        <nav>
          <ul className="header__nav">
            <AboutMeNavItems className="header__link" />
          </ul>
        </nav>
      )}
    </header>
  )
}

export default Header
