fix(docs): add TOC component with main content (#753)

fetchai · Jul 8, 2024 · 6a456e1 · 6a456e1
1 parent aeefee3
commit 6a456e1
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/styles/globals.css b/styles/globals.css
@@ -2493,6 +2493,15 @@ span:target + .subheading-anchor:after {
   scrollbar-gutter: stable;
 }
 
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
 @supports (color: color(display-p3 0 0 0)) {
   .nextra-scrollbar {
     scrollbar-color: color(display-p3 0.45095 0.45095 0.45095/0.4) transparent;

diff --git a/theme/fetch-ai-docs/components/toc.tsx b/theme/fetch-ai-docs/components/toc.tsx
@@ -60,7 +60,7 @@ export function TOC({ headings }: TOCProps): ReactElement {
     <div
       ref={tocRef}
       className={cn(
-        "nextra-scrollbar hide-toc  nx-top-16 nx-w-full nextra-toc-container nx-sticky nx-overflow-y-auto nx-text-sm [hyphens:auto]",
+        "nextra-scrollbar no-scrollbar hide-toc  nx-top-16 nx-w-full nextra-toc-container nx-sticky nx-overflow-y-auto nx-text-sm [hyphens:auto]",
         "nx-max-h-[calc(100vh-var(--nextra-navbar-height)-env(safe-area-inset-bottom))] rtl:-nx-ml-4",
       )}
     >

diff --git a/theme/fetch-ai-docs/index.tsx b/theme/fetch-ai-docs/index.tsx
@@ -192,13 +192,13 @@ const Body = ({
           {breadcrumb}
           {body}
         </main>
-      </article>
 
-      {themeContext.toc &&
-        renderComponent(config.toc.component, {
-          filePath: routeOriginal,
-          headings: structuredHeadings,
-        })}
+        {themeContext.toc &&
+          renderComponent(config.toc.component, {
+            filePath: routeOriginal,
+            headings: structuredHeadings,
+          })}
+      </article>
     </>
   );
 };