Implement toc on mobile

src/layouts/BlogPostLayout.astro

@@ -2,8 +2,10 @@
 import type { CollectionEntry } from "astro:content";
 import type { MarkdownHeading } from "astro";
 import type { AstroComponentFactory } from "astro/runtime/server/index.js";
+import { Icon } from "astro-icon/components";
 import Comments from "@/components/Comments.astro";
 import Prose from "@/components/Prose.astro";
+import ScrollToTop from "@/components/ScrollToTop.astro";
 import TableOfContents from "@/components/TableOfContents.astro";
 import TagBadge from "@/components/TagBadge.astro";
 import BaseLayout from "@/layouts/BaseLayout.astro";
@@ -45,17 +47,60 @@ const currentPath = Astro.url.pathname;
               <TagBadge tags={entry.data.tags} />
             </div>
           )}
+          {headings.length > 0 && (
+            <button id="toc-toggle" class="lg:hidden mt-4 flex items-center gap-2 text-sm font-medium text-fg-muted hover:text-accent transition-colors">
+              <Icon name="fa6-solid:list" class="w-4 h-4" />
+              Table of Contents
+            </button>
+          )}
         </header>
 
         <Content />
       </Prose>
 
       {headings.length > 0 && (
-        <aside class="lg:w-56 shrink-0 hidden lg:block">
-          <TableOfContents headings={headings} currentPath={currentPath} />
-        </aside>
+        <>
+          <div id="mobile-toc" class="fixed inset-0 z-30 hidden w-screen h-screen overflow-auto bg-surface-alt/50 backdrop-blur-sm lg:hidden">
+            <div class="flex flex-col w-full max-w-xs ml-auto h-full bg-surface shadow-xl">
+              <button id="toc-close" class="self-end m-4 cursor-pointer hover:text-accent transition-colors">
+                <Icon name="fa6-solid:xmark" class="w-5 h-5" />
+              </button>
+              <div class="flex-1 overflow-auto px-4">
+                <TableOfContents headings={headings} currentPath={currentPath} />
+              </div>
+            </div>
+          </div>
+
+          <aside class="lg:w-56 shrink-0 hidden lg:block">
+            <TableOfContents headings={headings} currentPath={currentPath} />
+          </aside>
+        </>
       )}
     </div>
     <Comments />
+    <ScrollToTop />
   </article>
 </BaseLayout>
+
+<script>
+  const tocToggle = document.getElementById("toc-toggle");
+  const tocClose = document.getElementById("toc-close");
+  const mobileToc = document.getElementById("mobile-toc");
+
+  tocToggle?.addEventListener("click", () => {
+    mobileToc?.classList.remove("hidden");
+    document.body.style.overflow = "hidden";
+  });
+
+  tocClose?.addEventListener("click", () => {
+    mobileToc?.classList.add("hidden");
+    document.body.style.overflow = "";
+  });
+
+  mobileToc?.addEventListener("click", (e) => {
+    if (e.target === mobileToc) {
+      mobileToc.classList.add("hidden");
+      document.body.style.overflow = "";
+    }
+  });
+</script>