WIP, add toc to side

web/components/TableOfContent.js

@@ -18,8 +18,6 @@ export default function TableOfContent(props) {
       }
     })
 
-  console.log('Headings', headings)
-
   const getNestedHeadings = (headingElements) => {
     const nestedHeadings = []
 
@@ -42,15 +40,35 @@ export default function TableOfContent(props) {
   const list = getNestedHeadings(headings)
 
   return (
-    <List color="gray.500" listStyleType="disc">
+    <List className="toc" color="gray.500" listStyleType="disc">
       {list.map((heading) => (
         <ListItem key={heading.id}>
-          <Link href={`#${heading.id}`}>{heading.text}</Link>
+          <Link
+            href={`#${heading.id}`}
+            sx={{
+              '.toc:hover &': {
+                display: 'block',
+              },
+            }}
+            display="none"
+          >
+            {heading.text}
+          </Link>
           {heading.items.length > 0 && (
-            <List listStyleType="circle">
+            <List className="toc" listStyleType="circle">
               {heading.items.map((child) => (
                 <ListItem key={child.id}>
-                  <Link href={`#${child.id}`}>{child.text}</Link>
+                  <Link
+                    href={`#${child.id}`}
+                    sx={{
+                      '.toc:hover &': {
+                        display: 'block',
+                      },
+                    }}
+                    display="none"
+                  >
+                    {child.text}
+                  </Link>
                 </ListItem>
               ))}
             </List>

web/pages/[...slug].js

 import { getRoute, getRoutes } from '../lib/api'
-import { Container, Text } from '@chakra-ui/react'
+import { Box, Container, Text } from '@chakra-ui/react'
 import Date from '../components/Date'
 import Layout from '../components/Layout'
 import Sections from '../components/Sections/Sections'
@@ -14,12 +14,15 @@ export default function Page({ data, preview }) {
   return (
     <Layout preview={preview} site={data.siteSettings}>
       <Container maxWidth="4xl" centerContent>
-        <TableOfContent blocks={body} />
-
         {/* A Page  */}
         {content && <Sections sections={content} />}
 
         {/* If LinguisticDocument the content is in the body field */}
+        {body && (
+          <Box position="fixed" left="10" top="50vh">
+            <TableOfContent blocks={body} />
+          </Box>
+        )}
         {body && <PortableTextBlock blocks={body} />}
 
         <Text mt="5" color="gray.500" fontSize="sm">