src/components/header.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import React from 'react'
import { css } from '@emotion/core'
import { Link } from 'gatsby'
import { Nav } from './nav'
import { Social } from './social'

const headerStyle = ({ margins, breakpoints }) => css`
  margin: 0 0 ${margins.lg}px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  @media (min-width: ${breakpoints[0].breakpoint}) {
    justify-content: space-between;
  }
`

const headerLinkStyle = css`
  border: none;
`

const headerLeftStyle = ({ margins }) => css`
  margin: 0 0 ${margins.md}px 0;
`

export const Header = p => (
  <header css={headerStyle}>
    <div css={headerLeftStyle}>
      <h1
        css={css`
          margin: 0;
        `}
      >
        <Link to="/" css={headerLinkStyle}>
          {p.siteName}
        </Link>
      </h1>
      <Social socialEntries={p.socialEntries} />
    </div>
    <Nav links={p.links} />
  </header>
)