refactor: move mobile ToC into hamburger menu

Replace standalone MobileToc component with an "On this page" section
inside the hamburger nav panel. JS clones h2 links from the existing
sidebar-toc at runtime. Tapping a section link closes the panel and
scrolls to the heading.

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

Author: braboj

.claude/worktrees/agent-abc53eb2

@@ -0,0 +1 @@
+Subproject commit a9d1faee4bb53b601f763e5aff2d543242ec49ab

astro-site/src/components/Header.astro

@@ -90,4 +90,31 @@ const base = import.meta.env.BASE_URL;
     navToggle.setAttribute("aria-expanded", "false");
     siteTabs.classList.remove("open");
   });
+
+  // Populate "On this page" section from the sidebar ToC
+  const sidebarToc = document.querySelector(".sidebar-toc");
+  if (sidebarToc) {
+    const topLinks = sidebarToc.querySelectorAll(":scope > ul > li");
+    if (topLinks.length > 0) {
+      const label = document.createElement("div");
+      label.className = "nav-toc-label";
+      label.textContent = "On this page";
+      siteTabs.appendChild(label);
+
+      topLinks.forEach((li) => {
+        const source = li.querySelector(":scope > a, :scope > details > summary > a");
+        if (source) {
+          const link = document.createElement("a");
+          link.href = source.getAttribute("href");
+          link.textContent = source.textContent;
+          link.className = "nav-toc-link";
+          link.addEventListener("click", () => {
+            navToggle.setAttribute("aria-expanded", "false");
+            siteTabs.classList.remove("open");
+          });
+          siteTabs.appendChild(link);
+        }
+      });
+    }
+  }
 </script>

astro-site/src/components/MobileToc.astro

@@ -4,7 +4,6 @@ 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 {
@@ -67,7 +66,6 @@ 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/layouts/DocLayout.astro

@@ -572,11 +572,6 @@ 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 {
@@ -588,62 +583,6 @@ 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;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    background: var(--color-bg);
-  }
-
-  .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) {
@@ -686,6 +625,28 @@ a:hover {
     background: rgba(255, 255, 255, 0.1);
   }
 
+  .nav-toc-label {
+    padding: var(--space-sm) var(--space-md);
+    font-size: var(--font-size-sm);
+    font-weight: 600;
+    color: rgba(255, 255, 255, 0.5);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .nav-toc-link {
+    padding: var(--space-xs) var(--space-md) var(--space-xs) var(--space-lg);
+    font-size: var(--font-size-sm);
+    color: rgba(255, 255, 255, 0.8);
+    text-decoration: none;
+    display: block;
+  }
+
+  .nav-toc-link:hover {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
   .content {
     padding: var(--space-lg) var(--space-md);
   }