feat: implements new ResponsiveLayout component

Author: wilcorrea

src/components/ResponsiveLayout.tsx

@@ -53,15 +53,15 @@ const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>(
       <div
         ref={backdropRef}
         onClick={handleClose}
-        className="fixed inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-100 z-[5] lg:hidden"
+        className="absolute inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-100 z-[5] lg:hidden"
       />
 
       <div
         ref={sidebarRef}
         className={cn(
           "h-full w-3/12 min-w-[240px] -translate-x-full transition-transform duration-100",
-          "absolute top-0 left-0 z-10 bg-background p-[10px]",
-          "lg:relative lg:block lg:bg-transparent lg:translate-x-0 lg:p-5",
+          "absolute top-0 left-0 z-10 bg-background p-5",
+          "lg:relative lg:block lg:bg-transparent lg:translate-x-0 lg:px-6",
         )}
       >
         <div className="flex justify-end lg:hidden">
@@ -72,7 +72,7 @@ const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>(
         <div>{leftContent}</div>
       </div>
 
-      <div className="w-full lg:w-9/12 p-[20px] lg:p-5">
+      <div className="w-full lg:w-9/12 p-5 lg:px-6">
         <div className="flex items-center gap-3 mb-4">
           <button
             onClick={handleToggle}

src/pages/Docs/Reference.tsx

@@ -1,47 +1,52 @@
-import { DocsResponsiveSidebar } from "@/components/DocsResponsiveSidebar";
+import ResponsiveLayout, { ResponsiveLayoutRef } from "@/components/ResponsiveLayout.tsx";
+import ResponsiveLayoutSidebar, {
+  ResponsiveLayoutSidebarItem,
+} from "@/components/ResponsiveLayoutSidebar.tsx";
+import React, { useRef } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 
 const Reference = () => {
+  const layoutRef = useRef<ResponsiveLayoutRef>(null);
   const navigate = useNavigate();
-  const sidebarItems = [
+  const sidebarItems: ResponsiveLayoutSidebarItem[] = [
     {
       id: "constructo",
-      label: "constructo",
+      label: "Constructo",
       level: 0,
     },
     {
       id: "serendipity",
-      label: "serendipity",
+      label: "Serendipity",
       level: 0,
     },
     {
       id: "effulgence",
-      label: "effulgence",
+      label: "Effulgence",
       level: 0,
     },
     {
       id: "tevun",
-      label: "tevun",
+      label: "Tevun",
       level: 0,
     },
     {
       id: "http",
-      label: "http",
+      label: "Http",
       level: 0,
     },
     {
       id: "docekrize",
-      label: "docekrize",
+      label: "Docekrize",
       level: 0,
     },
     {
       id: "dockerfile",
-      label: "dockerfile",
+      label: "Dockerfile",
       level: 0,
     },
     {
       id: "arceau",
-      label: "arceau",
+      label: "Arceau",
       level: 0,
     },
   ];
@@ -51,20 +56,16 @@ const Reference = () => {
   };
 
   return (
-    <div className="flex gap-8">
-      {/* Sidebar responsivo */}
-      <DocsResponsiveSidebar
-        items={sidebarItems}
-        onItemClick={handleItemClick}
-        title="Pacotes & Ferramentas"
-        description="Navegue pelos packages e ferramentas disponíveis"
-      />
-
-      {/* Conteúdo Principal */}
-      <div className="flex-1 lg:border-l lg:pl-8">
-        <Outlet />
-      </div>
-    </div>
+    <ResponsiveLayout
+      ref={layoutRef}
+      title={"Nossas Soluções"}
+      leftContent={<ResponsiveLayoutSidebar items={sidebarItems} onItemClick={handleItemClick} />}
+      rightContent={
+        <div className="relative">
+          <Outlet />
+        </div>
+      }
+    />
   );
 };
 

src/pages/Docs/Reference/Index.tsx

@@ -5,9 +5,6 @@ const ReferenceIndex = () => {
   return (
     <div className="space-y-8">
       <div className="space-y-4">
-        <h1 className="text-4xl font-bold bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
-          Referência de Pacotes
-        </h1>
         <p className="text-xl text-muted-foreground">
           Documentação detalhada dos pacotes e ferramentas Devitools.
         </p>
@@ -28,7 +25,7 @@ const ReferenceIndex = () => {
         </CardHeader>
         <CardContent>
           <p className="text-muted-foreground">
-            Em breve você encontrará aqui a referência completa de todos os pacotes Devitools, 
+            Em breve você encontrará aqui a referência completa de todos os pacotes Devitools,
             incluindo APIs, exemplos de uso e guias de implementação para cada ferramenta.
           </p>
         </CardContent>
@@ -37,4 +34,4 @@ const ReferenceIndex = () => {
   );
 };
 
-export default ReferenceIndex;
+export default ReferenceIndex;