fantus/screens/menu.tsx

import React, { useState, useCallback } from 'react'

import Link from '../components/link'

import '../styles/menu.styl'

const HomeLink = () => (
  <div className="home">
    <Link href="/">
      <div>fantus</div>
    </Link>
  </div>
)

const Menu: React.FC = () => {
  const [open, setOpen] = useState(false)

  const _close = useCallback(() => {
    setOpen(false)
  }, [])

  const _toggle = useCallback(() => {
    setOpen(!open)
  }, [open])

  return (
    <nav className="main flex justify-between items-center">
      <HomeLink />

      <img id="icon" src="/assets/menu.svg" onClick={_toggle} />

      <div className={`links flex ${open ? 'open' : ''}`.trim()} onClick={_close}>
        <HomeLink />
        <Link href="/works">
          <div>works</div>
        </Link>
        <Link href="/sets">
          <div>sets</div>
        </Link>
        <Link href="/mastering">
          <div>mastering</div>
        </Link>
        <Link href="/about">
          <div>about</div>
        </Link>
      </div>
    </nav>
  )
}

export default Menu