feat: Use DocsResponsiveSidebar for Reference

The Reference page now uses the DocsResponsiveSidebar component to display the left column, which shows the packages.

Author: lovable-dev[bot]

src/pages/Docs/Reference.tsx

@@ -1,10 +1,12 @@
-import { NavLink, Outlet } from "react-router-dom";
+import { NavLink, Outlet, useNavigate } from "react-router-dom";
 import { Soon } from "@/components/Soon";
+import { DocsResponsiveSidebar } from "@/components/DocsResponsiveSidebar";
 
 const Reference = () => {
+  const navigate = useNavigate();
   const packages = [
     "constructo",
-    "serendipity",
+    "serendipity", 
     "effulgence",
     "tevun",
     "http",
@@ -13,35 +15,28 @@ const Reference = () => {
     "arceau",
   ];
 
+  const sidebarItems = packages.map(packageName => ({
+    id: packageName,
+    label: packageName,
+    level: 0
+  }));
+
+  const handleItemClick = (id: string) => {
+    navigate(`/docs/reference/${id}`);
+  };
+
   return (
     <div className="flex gap-8">
-      {/* Sumário - Coluna Esquerda */}
-      <div className="w-64 flex-shrink-0">
-        <div className="sticky top-6 p-4">
-          <nav className="space-y-2">
-            <h3 className="text-sm font-semibold text-foreground mb-3">Pacotes & Ferramentas</h3>
-            {packages.map(packageName => (
-              <NavLink
-                key={packageName}
-                to={`/docs/reference/${packageName}`}
-                className={({ isActive }) =>
-                  `flex items-center justify-between w-full text-left text-sm py-2 px-2 rounded transition-colors ${
-                    isActive
-                      ? "text-primary bg-primary/10"
-                      : "text-muted-foreground hover:text-primary hover:bg-primary/5"
-                  }`
-                }
-              >
-                <span>{packageName}</span>
-                <Soon className="ml-2" />
-              </NavLink>
-            ))}
-          </nav>
-        </div>
-      </div>
+      {/* Sidebar responsivo */}
+      <DocsResponsiveSidebar
+        items={sidebarItems}
+        onItemClick={handleItemClick}
+        title="Pacotes & Ferramentas"
+        description="Navegue pelos packages e ferramentas disponíveis"
+      />
 
-      {/* Conteúdo Principal - Coluna Direita */}
-      <div className="flex-1 border-l pl-8">
+      {/* Conteúdo Principal */}
+      <div className="flex-1 lg:border-l lg:pl-8">
         <Outlet />
       </div>
     </div>