feat(toc): ✨ millora la taula de continguts

src/app/(markdown)/ep/page.tsx

@@ -0,0 +1,37 @@
+import { TOC } from "./toc";
+
+export default function Page() {
+  return (
+    <div className="flex flex-col lg:flex-row max-w-screen-xl mx-auto px-4 lg:px-8">
+      <TOC />
+
+      <main className="prose prose-neutral dark:prose-invert max-w-none lg:w-3/5 pt-8">
+        <h1 id="introduccio">Introducció</h1>
+        <p>Contingut de l'article...</p>
+
+        <h2 id="exemple">Exemple</h2>
+        <p>Altres seccions del markdown...</p>
+      </main>
+
+      <aside className="lg:w-1/5 lg:pl-6 pt-8">
+        <div className="sticky top-8 space-y-4">
+          <h2 className="text-sm font-semibold text-gray-900 uppercase tracking-wide">
+            Articles relacionats
+          </h2>
+          <ul className="text-sm space-y-2">
+            <li>
+              <a href="/article-1" className="text-blue-600 hover:underline">
+                Article relacionat 1
+              </a>
+            </li>
+            <li>
+              <a href="/article-2" className="text-blue-600 hover:underline">
+                Article relacionat 2
+              </a>
+            </li>
+          </ul>
+        </div>
+      </aside>
+    </div>
+  );
+}

src/app/(markdown)/ep/toc.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { XIcon } from "lucide-react";
+import { useState } from "react";
+
+export function TOC() {
+  const [isOpen, setIsOpen] = useState(false);
+
+  function handleLinkClick() {
+    // Només tanquem si estem en mòbil (breakpoint manual)
+    if (window.innerWidth < 1024) setIsOpen(false);
+  }
+
+  return (
+    <>
+      {/* Mobile TOC button */}
+      <div className="lg:hidden fixed bottom-4 right-4 z-50">
+        <Button
+          type="button"
+          onClick={() => setIsOpen(!isOpen)}
+          aria-label="Mostra taula de continguts"
+          variant="secondary"
+        >
+          Continguts
+        </Button>
+      </div>
+
+      {/* TOC container */}
+      <aside
+        className={cn(
+          isOpen ? "fixed inset-0 z-40 bg-white p-6 overflow-y-auto" : "hidden",
+          "lg:block lg:static lg:w-1/5 lg:pr-6 lg:pt-8 lg:bg-transparent lg:overflow-visible",
+        )}
+      >
+        <div className="mt-12 flex justify-between items-center lg:hidden mb-4">
+          <h2 className="text-lg font-semibold">Taula de continguts</h2>
+          <button
+            onClick={() => setIsOpen(false)}
+            aria-label="Tanca taula de continguts"
+          >
+            <XIcon className="size-4" />
+          </button>
+        </div>
+
+        <nav aria-label="Taula de continguts" className="lg:sticky lg:top-8">
+          <ul className="text-sm space-y-2">
+            <li>
+              <a
+                href="#introduccio"
+                className="text-gray-700 hover:underline"
+                onClick={handleLinkClick}
+              >
+                Introducció
+              </a>
+            </li>
+            <li>
+              <a
+                href="#exemple"
+                className="text-gray-700 hover:underline"
+                onClick={handleLinkClick}
+              >
+                Exemple
+              </a>
+            </li>
+          </ul>
+        </nav>
+      </aside>
+    </>
+  );
+}