Merge remote-tracking branch 'geth-website/documentNavScroll' into documentNavScroll

pull/26459/head
Paul Wackerow 2 years ago
commit 405822a262
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
  1. 62
      src/components/UI/docs/DocumentNav.tsx

@ -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;
};

Loading…
Cancel
Save