{"size": 821, "ext": "js", "max_stars_repo_path": "src/components/layout/Header.js", "max_stars_repo_name": "tajoy/tajoy.github.io", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/layout/Header.js", "max_issues_repo_name": "tajoy/tajoy.github.io", "max_issues_repo_issues_event_min_datetime": "2020-05-10T17:55:09.000Z", "max_issues_repo_issues_event_max_datetime": "2021-08-31T19:55:32.000Z", "max_forks_repo_path": "src/components/layout/Header.js", "max_forks_repo_name": "tajoy/tajoy.github.io", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 51, "max_forks_count": null, "avg_line_length": 21.6052631579, "max_line_length": 54, "alphanum_fraction": 0.6443361754}
import React from "react"
import { Link } from "gatsby"

import styled from "styled-components"
import theme from "styled-theming"
import { LIGHT, DARK } from "../../theme/colors"

import { rhythm, scale } from "../../utils/typography"
import { withContext } from "../ContextProvider"

import Menu from "./Menu"

const Container = styled.div`
  background-color: #ffa;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: ${rhythm(2)};
  border-bottom: ${theme("mode", {
    light: "1px solid #0004",
    dark: "1px solid #000",
  })};
  background-color: ${theme("mode", {
    light: LIGHT.HEADER.BG,
    dark: DARK.HEADER.BG,
  })};
`

const Header = ({ needMoveLeft }) => {
  return (
    <Container>
      <Menu needMoveLeft={needMoveLeft} />
    </Container>
  )
}

export default Header
