Improve layout

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>

docs-ui/src/app/components/[slug]/page.tsx

@@ -7,9 +7,7 @@ export default async function Page({
 }) {
   const { slug } = await params;
 
-  const { default: Component } = await import(
-    `@/content/components/${slug}.mdx`
-  );
+  const { default: Component } = await import(`@/content/${slug}.mdx`);
 
   return <Component />;
 }

docs-ui/src/app/layout.module.css

@@ -5,10 +5,28 @@
   padding-inline: 24px;
 }
 
-.content {
+.contentWrapper {
+  display: flex;
   width: 100%;
   max-width: 1200px;
   margin: 0 auto;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.content {
+  display: flex;
+  gap: 40px;
+}
+
+.contentInner {
+  flex: 1;
+  min-width: 0;
+  overflow-x: hidden;
+}
+
+.toc {
+  display: none;
 }
 
 @media (min-width: 768px) {
@@ -18,3 +36,11 @@
     margin-right: 40px;
   }
 }
+
+@media (min-width: 1280px) {
+  .toc {
+    display: block;
+    width: 240px;
+    flex-shrink: 0;
+  }
+}

docs-ui/src/app/layout.tsx

@@ -4,6 +4,7 @@ import { Toolbar } from '@/components/Toolbar';
 import { StickyHeader } from '../components/StickyHeader/StickyHeader';
 import { Providers } from './providers';
 import { CustomTheme } from '@/components/CustomTheme';
+import { TableOfContents } from '@/components/TableOfContents';
 import styles from './layout.module.css';
 
 import '../css/globals.css';
@@ -53,9 +54,14 @@ export default async function RootLayout({
           <Sidebar />
           {/* <StickyHeader /> */}
           <div className={styles.container}>
-            <div className={styles.content}>
+            <div className={styles.contentWrapper}>
               <Toolbar version={packageVersion} />
-              {children}
+              <div className={styles.content}>
+                <div className={styles.contentInner}>{children}</div>
+                <aside className={styles.toc}>
+                  <TableOfContents />
+                </aside>
+              </div>
             </div>
           </div>
           <CustomTheme />