/** @jsx jsx */ import { useMemo, createRef, useEffect } from 'react'; import { Container, jsx, NavLink, Flex, Box } from 'theme-ui'; import Link from 'next/link'; import useStore from '../stores/store'; const SubNav = ({ links, query, router }) => { const activeGroup = useStore((state) => state.activeGroup); const activeLink = links.find((link) => link.slug === activeGroup); const refs = useMemo(() => Array.from({ length: links.length }).map(() => createRef()), [ links.length, ]); useEffect(() => { setTimeout(() => { const idx = links.indexOf(activeLink); refs[idx]?.current?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center', }); }, 200); }, [activeLink, links, refs, router?.query.slug]); return ( <Box sx={{ border: 'light', borderColor: 'muted', borderWidth: '1px 0 1px 0', bg: 'background', }} > <Container sx={{ mt: 2 }}> <Flex as="nav" sx={{ alignItems: 'center', pb: 2, overflow: 'auto', '::-webkit-scrollbar': { display: 'none', }, scrollbarWidth: 'none', }} > {links.map(({ name, url, slug }, i) => ( <Link href={{ pathname: url, query }} passHref key={name}> <NavLink ref={refs[i]} sx={{ color: slug === activeGroup ? 'primary' : undefined, minWidth: 'max-content', pl: 2, pr: 4, '&:first-of-type': { pl: 0 }, }} > {name} </NavLink> </Link> ))} </Flex> </Container> </Box> ); }; export default SubNav;