From 42248dcedf157ed24d1ad5e42d07dfd659254098 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Tue, 13 Dec 2022 06:23:26 -0700
Subject: [PATCH] [bug] right side navigation menu is not being rendered ok in
 some cases (#146)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 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>
---
 .../rpc/ns-personal-deprecation.md            |  2 +-
 src/components/UI/Header.tsx                  |  2 ++
 src/components/UI/docs/DocumentNav.tsx        |  6 ++---
 src/components/UI/docs/MDComponents.tsx       |  4 ++--
 src/pages/[...slug].tsx                       | 24 +++++++++++--------
 5 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/docs/interacting-with-geth/rpc/ns-personal-deprecation.md b/docs/interacting-with-geth/rpc/ns-personal-deprecation.md
index 4f2137ccd0..e06845290c 100644
--- a/docs/interacting-with-geth/rpc/ns-personal-deprecation.md
+++ b/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
 
diff --git a/src/components/UI/Header.tsx b/src/components/UI/Header.tsx
index 02cac559d6..541d7dcc22 100644
--- a/src/components/UI/Header.tsx
+++ b/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'
           }}
         >
diff --git a/src/components/UI/docs/DocumentNav.tsx b/src/components/UI/docs/DocumentNav.tsx
index cc999dd8be..66cbcfa1fd 100644
--- a/src/components/UI/docs/DocumentNav.tsx
+++ b/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;
 };
diff --git a/src/components/UI/docs/MDComponents.tsx b/src/components/UI/docs/MDComponents.tsx
index 852ee781a3..94612e36eb 100644
--- a/src/components/UI/docs/MDComponents.tsx
+++ b/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
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index e6026ae500..a8f00430eb 100644
--- a/src/pages/[...slug].tsx
+++ b/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>
     </>
   );