Nav.js

import React from "react"
import { animated } from "react-spring"
import { Link } from "gatsby"

import "./nav.css"

const Nav = ({ style }) => (
  <animated.nav style={style} className="nav">
    <ul>
      <li>
        <Link to="/" activeClassName="nav-active">
          home
        </Link>
      </li>
      <li>
        <Link to="/about" activeClassName="nav-active">
          about me
        </Link>
      </li>
      <li>
        work
        <ul className="nav-sub-list">
          <li>
            <Link to="/writing" activeClassName="nav-active">
              writing
            </Link>
          </li>
          <li>
            <Link to="/speaking" activeClassName="nav-active">
              speaking
            </Link>
          </li>
          <li>
            <Link to="/teaching" activeClassName="nav-active">
              teaching
            </Link>
          </li>
          <li>
            <Link to="/podcasting" activeClassName="nav-active">
              podcasting
            </Link>
          </li>
        </ul>
      </li>
      <li>
        <Link to="/contact" activeClassName="nav-active">
          get in touch
        </Link>
      </li>
    </ul>
  </animated.nav>
)

export default Nav

Thank you