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