updated look

components/mdx/MobileTableOfContents.tsx

@@ -1,7 +1,3 @@
-'use client';
-
-import { useState } from 'react';
-
 type Heading = {
     id: string;
     text: string;
@@ -9,42 +5,28 @@ type Heading = {
 };
 
 export function MobileTableOfContents({ headings }: { headings: Heading[] }) {
-    const [isOpen, setIsOpen] = useState(false);
-
     if (headings.length === 0) return null;
 
     return (
-        <div className="block xl:hidden mb-8 border border-zinc-200 dark:border-zinc-800 rounded-lg overflow-hidden">
-            <button
-                onClick={() => setIsOpen(!isOpen)}
-                aria-expanded={isOpen}
-                aria-controls="mobile-toc"
-                className="w-full flex items-center justify-between p-4 bg-zinc-50 dark:bg-zinc-900 text-sm font-medium text-zinc-900 dark:text-zinc-100"
-            >
-                <span>Table of Contents</span>
-                <span className={`transform transition-transform ${isOpen ? 'rotate-180' : ''}`}>
-                    ▼
-                </span>
-            </button>
-
-            {isOpen && (
-                <ul id="mobile-toc" className="p-4 bg-white dark:bg-black border-t border-zinc-200 dark:border-zinc-800 space-y-3">
-                    {headings.map((heading) => (
-                        <li
-                            key={heading.id}
-                            style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
+        <details className="mb-8 border-y border-line py-4">
+            <summary className="eyebrow cursor-pointer list-none">
+                Contents
+            </summary>
+            <ul className="mt-4 space-y-2">
+                {headings.map((heading) => (
+                    <li
+                        key={heading.id}
+                        style={{ paddingLeft: `${(heading.level - 2) * 12}px` }}
+                    >
+                        <a
+                            href={`#${heading.id}`}
+                            className="block text-[0.94rem] leading-7 text-muted transition-colors hover:text-ink"
                         >
-                            <a
-                                href={`#${heading.id}`}
-                                onClick={() => setIsOpen(false)}
-                                className="block text-sm text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-zinc-100 truncate"
-                            >
-                                {heading.text}
-                            </a>
-                        </li>
-                    ))}
-                </ul>
-            )}
-        </div>
+                            {heading.text}
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </details>
     );
 }