From c705dc830d633b824bd3ec727c092c2c9b5535ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albert=20Ma=C3=B1osa?=
 <26429103+albertms10@users.noreply.github.com>
Date: Sat, 22 Mar 2025 22:45:44 +0100
Subject: [PATCH] =?UTF-8?q?feat(toc):=20=E2=9C=A8=20millora=20la=20taula?=
 =?UTF-8?q?=20de=20continguts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(markdown)/ep/page.tsx | 37 +++++++++++++++++
 src/app/(markdown)/ep/toc.tsx  | 72 ++++++++++++++++++++++++++++++++++
 2 files changed, 109 insertions(+)
 create mode 100644 src/app/(markdown)/ep/page.tsx
 create mode 100644 src/app/(markdown)/ep/toc.tsx

diff --git a/src/app/(markdown)/ep/page.tsx b/src/app/(markdown)/ep/page.tsx
new file mode 100644
index 0000000..f053a5e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/(markdown)/ep/toc.tsx b/src/app/(markdown)/ep/toc.tsx
new file mode 100644
index 0000000..5a2b57a
--- /dev/null
+++ b/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>
+    </>
+  );
+}