interesting
/
go-ethereum
mirror of https://github.com/ethereum/go-ethereum.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
Paul Wackerow 2023-01-09 15:07:18 -08:00
parent b798bc8f16 33582aae39
commit 405822a262
No known key found for this signature in database
GPG Key ID: BB63E296FE9CAB8D
1 changed files with 32 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/UI/docs/DocumentNav.tsx
View File

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