src/components/nav.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'

const navStyle = css`
  display: flex;
  align-items: center;
`

export const Nav = p => {
  const linkStyle = ({ margins, breakpoints }) => css`
    padding: 0 ${margins.sm}px ${margins.sm}px ${margins.sm}px;
    @media (min-width: ${breakpoints[0].breakpoint}) {
      padding: 0 ${margins.md}px ${margins.md}px ${margins.md}px;
    }
    &:not(:last-child) {
      margin: 0 ${margins.sm}px 0 0;
    }
    text-decoration: none;
    border: ${p.hoverBorder};
    border-color: rgba(0, 0, 0, 0);
    &:hover {
      border-color: initial;
    }
  `
  return (
    <nav css={navStyle}>
      {p.links
        ? p.links.map(({ name, to }) => (
            <Link
              css={linkStyle}
              to={to}
              key={to}
              activeStyle={{ borderColor: 'initial' }}
            >
              {name}
            </Link>
          ))
        : null}
    </nav>
  )
}