Layout.js

import React, { useState } from "react"
import PropTypes from "prop-types"
import { useSpring } from "react-spring"

import Header from "./header"
import Nav from "./nav"
import "./layout.css"

const Layout = ({ children }) => {
  const [navOpen, toggleNavOpen] = useState(false)
  const navAnimation = useSpring({
    opacity: navOpen ? 1 : 0,
    transform: navOpen ? `translateY(0)` : `translateY(-100%)`,
  })

  return (
    <>
      <Header navOpen={navOpen} toggleNavOpen={() => toggleNavOpen(!navOpen)} />
      <Nav style={navAnimation} />
      <main>{children}</main>
    </>
  )
}

Layout.propTypes = {
  children: PropTypes.node.isRequired,
}

export default Layout