import React from 'react';
import { Link } from 'gatsby';

const ExactLink = (props) => (
  <Link
    to={props.to}
    style={{ textDecoration: 'none' }}
    activeStyle={{ color: 'red' }}
    partiallyActive={!props.home}
  >
    {props.children}
  </Link>
);

export default function Navbar() {
  return (
    <nav>
      <h1>
        <ExactLink to='/' home={true}>
          Edward Shen
        </ExactLink>
      </h1>
      <h3>
        <ExactLink to='/projects'>Projects</ExactLink>
      </h3>
      <h3>
        <ExactLink to='/notes'>Notes</ExactLink>
      </h3>
    </nav>
  );
}