|
|
|
@ -1,5 +1,5 @@ |
|
|
|
|
import { FC } from 'react'; |
|
|
|
|
import { Box, Divider, Link, Text } from '@chakra-ui/react'; |
|
|
|
|
import { Box, Divider, Link, Stack, Text } from '@chakra-ui/react'; |
|
|
|
|
import NextLink from 'next/link'; |
|
|
|
|
|
|
|
|
|
import { parseHeadingId } from '../../../utils/parseHeadingId'; |
|
|
|
@ -23,38 +23,40 @@ export const DocumentNav: FC<Props> = ({ content }) => { |
|
|
|
|
<Box as='aside' position='sticky' top='4'> |
|
|
|
|
<Text textStyle='document-nav-title'>on this page</Text> |
|
|
|
|
<Divider borderColor='primary' my={`4 !important`} /> |
|
|
|
|
<Stack height='500px' overflow='scroll'> |
|
|
|
|
{parsedHeadings.map((heading, idx) => { |
|
|
|
|
return ( |
|
|
|
|
<NextLink key={`${idx} ${heading?.title}`} href={`#${heading?.headingId}`} legacyBehavior> |
|
|
|
|
<Link m={0} textDecoration='none !important'> |
|
|
|
|
<Text |
|
|
|
|
color={activeHash === heading?.headingId ? 'body' : 'primary'} |
|
|
|
|
textStyle='document-nav-link' |
|
|
|
|
mb={3.5} |
|
|
|
|
_hover={{ |
|
|
|
|
background: 'primary', |
|
|
|
|
boxShadow: '0 0 0 6px var(--chakra-colors-primary)', |
|
|
|
|
color: 'bg' |
|
|
|
|
}} |
|
|
|
|
_focus={{ |
|
|
|
|
background: 'primary', |
|
|
|
|
boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important', |
|
|
|
|
color: 'bg', |
|
|
|
|
outline: '2px solid var(--chakra-colors-secondary) !important', |
|
|
|
|
outlineOffset: '4px' |
|
|
|
|
}} |
|
|
|
|
_active={{ |
|
|
|
|
background: 'secondary', |
|
|
|
|
boxShadow: '0 0 0 6px var(--chakra-colors-secondary)', |
|
|
|
|
color: 'bg' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{heading?.title} |
|
|
|
|
</Text> |
|
|
|
|
</Link> |
|
|
|
|
</NextLink> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
<Link m={0} textDecoration='none !important'> |
|
|
|
|
<Text |
|
|
|
|
color={activeHash === heading?.headingId ? 'body' : 'primary'} |
|
|
|
|
textStyle='document-nav-link' |
|
|
|
|
mb={3.5} |
|
|
|
|
_hover={{ |
|
|
|
|
background: 'primary', |
|
|
|
|
boxShadow: '0 0 0 6px var(--chakra-colors-primary)', |
|
|
|
|
color: 'bg' |
|
|
|
|
}} |
|
|
|
|
_focus={{ |
|
|
|
|
background: 'primary', |
|
|
|
|
boxShadow: '0 0 0 6px var(--chakra-colors-primary) !important', |
|
|
|
|
color: 'bg', |
|
|
|
|
outline: '2px solid var(--chakra-colors-secondary) !important', |
|
|
|
|
outlineOffset: '4px' |
|
|
|
|
}} |
|
|
|
|
_active={{ |
|
|
|
|
background: 'secondary', |
|
|
|
|
boxShadow: '0 0 0 6px var(--chakra-colors-secondary)', |
|
|
|
|
color: 'bg' |
|
|
|
|
}} |
|
|
|
|
> |
|
|
|
|
{heading?.title} |
|
|
|
|
</Text> |
|
|
|
|
</Link> |
|
|
|
|
</NextLink> |
|
|
|
|
); |
|
|
|
|
})} |
|
|
|
|
</Stack> |
|
|
|
|
</Box> |
|
|
|
|
) : null; |
|
|
|
|
}; |
|
|
|
|