wip adding scroll to DocumentNav

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'>
+              <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>
   ) : null;
 };