feat: add collapsible mobile ToC for in-page navigation

Add an "On this page" details element that lists h2 headings,
visible only at <=960px where the sidebar ToC is hidden. Placed
after the h1 in every chapter page.

Closes #110

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: braboj

astro-site/src/components/MobileToc.astro

@@ -0,0 +1,23 @@
+---
+interface Heading {
+  depth: number;
+  slug: string;
+  text: string;
+}
+
+const { headings = [] } = Astro.props as { headings: Heading[] };
+const h2s = headings.filter((h) => h.depth === 2);
+---
+
+{h2s.length > 0 && (
+  <details class="mobile-toc">
+    <summary>On this page</summary>
+    <ul>
+      {h2s.map((h) => (
+        <li>
+          <a href={`#${h.slug}`}>{h.text}</a>
+        </li>
+      ))}
+    </ul>
+  </details>
+)}

astro-site/src/layouts/DocLayout.astro

@@ -4,6 +4,7 @@ import Header from "../components/Header.astro";
 import TableOfContents from "../components/TableOfContents.astro";
 import TutorialLinks from "../components/TutorialLinks.astro";
 import Footer from "../components/Footer.astro";
+import MobileToc from "../components/MobileToc.astro";
 import site from "../data/site.json";
 
 interface Props {
@@ -66,6 +67,7 @@ const ogImage = new URL("/tutorial-git/images/og-banner.png", Astro.site);
       <div class="resize-handle" data-side="left"></div>
       <main class="content" id="main-content">
         <h1>{title}</h1>
+        <MobileToc headings={headings} />
         <slot />
       </main>
       <div class="resize-handle" data-side="right"></div>

astro-site/src/styles/global.css

@@ -572,6 +572,11 @@ a:hover {
   color: var(--color-fg-muted);
 }
 
+/* Mobile ToC — hidden on desktop, shown when sidebar disappears */
+.mobile-toc {
+  display: none;
+}
+
 /* Responsive */
 @media (max-width: 960px) {
   .site-main {
@@ -583,6 +588,58 @@ a:hover {
   .resize-handle {
     display: none;
   }
+
+  .mobile-toc {
+    display: block;
+    margin-bottom: var(--space-lg);
+    border: 1px solid var(--color-border);
+    border-radius: 4px;
+    padding: 0;
+  }
+
+  .mobile-toc summary {
+    padding: var(--space-sm) var(--space-md);
+    font-weight: 600;
+    font-size: var(--font-size-base);
+    color: var(--color-fg);
+    cursor: pointer;
+    list-style: none;
+  }
+
+  .mobile-toc summary::after {
+    content: "\25B6";
+    float: right;
+    font-size: 0.7em;
+    color: var(--color-fg-faint);
+    transition: transform 0.15s;
+  }
+
+  .mobile-toc[open] summary::after {
+    transform: rotate(90deg);
+  }
+
+  .mobile-toc summary::-webkit-details-marker {
+    display: none;
+  }
+
+  .mobile-toc ul {
+    list-style: none;
+    padding: 0 var(--space-md) var(--space-sm);
+  }
+
+  .mobile-toc li {
+    padding: var(--space-xs) 0;
+  }
+
+  .mobile-toc a {
+    color: var(--color-link);
+    text-decoration: none;
+    font-size: var(--font-size-sm);
+  }
+
+  .mobile-toc a:hover {
+    text-decoration: underline;
+  }
 }
 
 @media (max-width: 768px) {