You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
87 lines
2.0 KiB
87 lines
2.0 KiB
import React, { useEffect } from 'react'
|
|
import Link from 'next/link'
|
|
import { AnimateSharedLayout, motion } from 'framer-motion'
|
|
import { useRouter } from 'next/router'
|
|
import { Link as ChakraLink, Flex, Box, Stack, HStack } from '@chakra-ui/react'
|
|
import Headroom from 'react-headroom'
|
|
|
|
import paths from '../paths'
|
|
|
|
const Container = motion.custom(Flex)
|
|
|
|
const containerVariants = {
|
|
open: {
|
|
opacity: 1,
|
|
display: 'flex',
|
|
},
|
|
closed: {
|
|
opacity: 0,
|
|
transition: {
|
|
when: 'afterChildren',
|
|
},
|
|
transitionEnd: {
|
|
display: 'none',
|
|
},
|
|
},
|
|
}
|
|
|
|
type NavProps = {
|
|
handleClick: () => void
|
|
variant?: string
|
|
}
|
|
|
|
const Nav: React.FC<NavProps> = ({ handleClick, variant = undefined }) => {
|
|
const { pathname } = useRouter()
|
|
|
|
return (
|
|
<Container
|
|
direction="row"
|
|
wrap="wrap"
|
|
h="100%"
|
|
justify="center"
|
|
align="center"
|
|
display="flex"
|
|
variants={containerVariants}
|
|
animate={variant}
|
|
>
|
|
<Stack
|
|
direction={['column', 'column', 'row']}
|
|
spacing={['1rem', '1rem', '2.5rem']}
|
|
position={['absolute', 'static']}
|
|
align="center"
|
|
justify="center"
|
|
>
|
|
{paths.map((path) => {
|
|
const currentLocation = pathname === '/' ? '/' : pathname.substring(1)
|
|
const currentPath = path.path === '/' ? '/' : path.path.substring(1)
|
|
|
|
if (currentPath === '/') {
|
|
return null
|
|
}
|
|
|
|
const current =
|
|
currentLocation === currentPath ||
|
|
(currentPath !== '/' && currentLocation.includes(currentPath))
|
|
|
|
return (
|
|
<Box key={path.path}>
|
|
<Link href={path.path} passHref>
|
|
<ChakraLink
|
|
onClick={handleClick}
|
|
fontWeight="bold"
|
|
color={current ? 'blue' : 'black'}
|
|
fontSize="md"
|
|
>
|
|
{path.name}
|
|
</ChakraLink>
|
|
</Link>
|
|
</Box>
|
|
)
|
|
})}
|
|
</Stack>
|
|
</Container>
|
|
)
|
|
}
|
|
|
|
export default Nav
|