[bug] right side navigation menu is not being rendered ok in some cases (#146)

* dont render DocumentNav if there are no headings on a page

* Fix layout of elements in [...slug].tsx

* fix header

* fix span overflow

* prettier

* fix: missing white-space on pre tags

* fix: parsedHeadings bug

Co-authored-by: Nicolás Quiroz <nh.quiroz@gmail.com>

docs/interacting-with-geth/rpc/ns-personal-deprecation.md

@@ -23,7 +23,7 @@ Unpair deletes a pairing between some specific types of smartcard wallet and Get
 
 InitializeWallet is for initializing some specific types of smartcard wallet at a provided URL. There is not yet a corresponding method in Clef.
 
-## Methods with replacements:
+## Methods with replacements
 
 ### personal_listAccounts
 

src/components/UI/Header.tsx

@@ -39,10 +39,12 @@ export const Header: FC = () => {
           as='a'
           href='#main-content'
           pointerEvents='none'
+          w='0px'
           opacity={0}
           transition='opacity 200ms ease-in-out'
           _focus={{
             opacity: 1,
+            w: 'auto',
             transition: 'opacity 200ms ease-in-out'
           }}
         >

src/components/UI/docs/DocumentNav.tsx

@@ -13,13 +13,13 @@ export const DocumentNav: FC<Props> = ({ content }) => {
   const parsedHeadings = content
     .split('\n\n')
     .map(item => item.replace(/[\n\r]/g, ''))
-    .filter(item => item.startsWith('#'))
+    .filter(item => item.startsWith('##'))
     .map(item => parseHeadingId([item]))
     .filter(item => item);
 
   const activeHash = useActiveHash(parsedHeadings.map(heading => heading!.headingId));
 
-  return (
+  return parsedHeadings.length ? (
     <Box as='aside' position='sticky' top='4'>
       <Text textStyle='document-nav-title'>on this page</Text>
       <Divider borderColor='primary' my={`4 !important`} />
@@ -56,5 +56,5 @@ export const DocumentNav: FC<Props> = ({ content }) => {
         );
       })}
     </Box>
-  );
+  ) : null;
 };

src/components/UI/docs/MDComponents.tsx

@@ -101,8 +101,8 @@ const MDComponents = {
   ),
   // pre
   pre: ({ children }: any) => (
-    <Stack mb={5}>
-      <pre>{children}</pre>
+    <Stack mb={5} whiteSpace='pre'>
+      {children}
     </Stack>
   ),
   // code

src/pages/[...slug].tsx

@@ -1,7 +1,7 @@
 import fs from 'fs';
 import matter from 'gray-matter';
 import yaml from 'js-yaml';
-import { Box, Flex, Stack, Heading, Text } from '@chakra-ui/react';
+import { Box, Grid, Stack, Heading, Text } from '@chakra-ui/react';
 import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
 import ReactMarkdown from 'react-markdown';
 import { useRouter } from 'next/router';
@@ -99,7 +99,10 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
       <PageMetadata title={frontmatter.title} description={frontmatter.description} />
 
       <main>
-        <Flex direction={{ base: 'column', lg: 'row' }} gap={{ base: 4, lg: 8 }}>
+        <Grid
+          gap={{ base: 4, lg: 8 }}
+          templateColumns={{ base: 'repeat(1, 1fr)', lg: '288px 1fr' }}
+        >
           <Stack>
             <DocsNav navLinks={navLinks} />
           </Stack>
@@ -115,10 +118,14 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
               </Text>
             </Stack>
 
-            <Flex width='100%' placeContent='space-between' gap={8}>
+            <Grid
+              gap={{ base: 4, lg: 8 }}
+              templateColumns={{ base: 'repeat(1, 1fr)', xl: '1fr 192px' }}
+            >
               <Box
-                maxW='min(100%, 768px)'
+                w='min(100%, 768px)'
                 sx={{ '*:first-of-type': { marginTop: '0 !important' } }}
+                overflow='auto'
               >
                 <ReactMarkdown
                   remarkPlugins={[gfm]}
@@ -129,15 +136,12 @@ const DocPage: NextPage<Props> = ({ frontmatter, content, navLinks, lastModified
                 </ReactMarkdown>
               </Box>
 
-              <Stack
-                display={{ base: 'none', xl: 'block' }}
-                w='clamp(var(--chakra-sizes-40), 12.5%, var(--chakra-sizes-56))'
-              >
+              <Stack display={{ base: 'none', xl: 'block' }}>
                 <DocumentNav content={content} />
               </Stack>
-            </Flex>
+            </Grid>
           </Stack>
-        </Flex>
+        </Grid>
       </main>
     </>
   );