NavBar.tsx

NavBar.jsx

import React, { useState } from 'react'
import { Image, Box, Link as RebassLink, Flex, Button, SxStyleProp } from 'rebass'
import Link from 'next/link'
import HashLink from './HashLink'

interface LinkInterface {
  href: string
  text: string
}

interface LinkTreeInterface {
  section: string
  items?: LinkInterface[]
  href?: string
}

const linkTree: LinkTreeInterface[] = [ ... ]

const NavBarBody = ({ shown, onClick }: { onClick: () => void; shown: boolean }) => {
  const toggleStyles = (shown: boolean): SxStyleProp =>
    shown
      ? {
          '@media (max-width: 600px)': {
            height: '100vh',
            flexDirection: 'column',
            alignItems: 'center',
            img: {
              display: 'none'
            },
            '#close': {
              position: 'absolute',
              top: '15px',
              right: '15px',
              display: 'block'
            }
          }
        }
      : {
          '@media (max-width: 600px)': {
            justifyContent: 'space-between',
            button: {
              mr: '1em'
            },
            '#logo': {
              ml: '1em'
            },
            'a, select': {
              display: 'none'
            }
          }
        }

  return (
    <Flex variant="nav"
      sx={{
        ...toggleStyles(shown),
        '#close': {
          fontFamily: 'roboto'
        },
        '@media (min-width: 600px)': {
          '#close': {
            display: 'none'
          }
        }
      }}>
      <Image src="/logo.png" id="logo" alt="logo" />
      <Button variant="transparent" id="close" onClick={onClick}>
        {shown ? 'X' : '☰'}
      </Button>
      {linkTree.map(link =>
        link.href ? (
          link.href[0] === '#' ? (
            <HashLink href={link?.href}>{link.section}</HashLink>
          ) : (
            <Link href={link.href}>
              <RebassLink>{link.section}</RebassLink>
            </Link>
          )
        ) : (
          <Box as="select"
            sx={{
              width: '10em'
            }}>
            <option>{link.section}</option>
            {link.items?.map(({ text, href }: LinkInterface) => (
              <Link {...{ href }}>
                <option>{text}</option>
              </Link>
            ))}
          </Box>
        )
      )}
    </Flex>
  )
}

const NavBar = () => {
  const [shown, toggle] = useState(false)

  return (
    <Box
      sx={{
        position: 'sticky',
        top: 0,
        left: 0,
        zIndex: 200
      }}>
      <NavBarBody onClick={() => toggle(!shown)} shown={shown} />
    </Box>
  )
}

export default NavBar