feat: implements new ResponsiveLayout component

Author: wilcorrea

src/components/ResponsiveLayout.tsx

@@ -1,6 +1,6 @@
 import { cn } from "@/lib/utils.ts";
-import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { Menu, X } from "lucide-react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 
 interface ResponsiveLayoutProps {
   leftContent: React.ReactNode;
@@ -12,6 +12,13 @@ interface ResponsiveLayoutRef {
   closeSidebar: () => void;
 }
 
+const ResponsiveLayoutWrapper = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  (args: React.HTMLAttributes<HTMLDivElement>, ref) => {
+    const { className, ...props } = args;
+    return <div ref={ref} className={cn('p-5 lg:px-6"', className)} {...props} />;
+  },
+);
+
 const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>((props, ref) => {
   const { leftContent, rightContent, title } = props;
   const sidebarRef = useRef<HTMLDivElement>(null);
@@ -56,12 +63,13 @@ const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>(
         className="absolute inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-100 z-[5] lg:hidden"
       />
 
-      <div
+      <ResponsiveLayoutWrapper
         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-5",
-          "lg:relative lg:block lg:bg-transparent lg:translate-x-0 lg:px-6",
+          "h-full w-3/12 lg:w-2/12 min-w-[240px] md:min-w-fit -translate-x-full transition-transform duration-100",
+          "absolute top-0 left-0 z-10 bg-background",
+          "lg:relative lg:block lg:bg-transparent lg:translate-x-0",
+          "p-5 lg:px-6",
         )}
       >
         <div className="flex justify-end lg:hidden">
@@ -70,9 +78,9 @@ const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>(
           </button>
         </div>
         <div>{leftContent}</div>
-      </div>
+      </ResponsiveLayoutWrapper>
 
-      <div className="w-full lg:w-9/12 p-5 lg:px-6">
+      <ResponsiveLayoutWrapper className="w-full lg:10/12">
         <div className="flex items-center gap-3 mb-4">
           <button
             onClick={handleToggle}
@@ -87,12 +95,13 @@ const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>(
           )}
         </div>
         <div>{rightContent}</div>
-      </div>
+      </ResponsiveLayoutWrapper>
     </div>
   );
 });
 
 ResponsiveLayout.displayName = "ResponsiveLayout";
+ResponsiveLayoutWrapper.displayName = "ResponsiveLayoutWrapper";
 
-export default ResponsiveLayout;
+export { ResponsiveLayout, ResponsiveLayoutWrapper };
 export type { ResponsiveLayoutRef };

src/components/ResponsiveLayoutSidebar.tsx

@@ -27,7 +27,9 @@ const ResponsiveLayoutSidebar = (props: ResponsiveLayoutSidebarProps) => {
           onClick={() => onItemClick(item.id)}
           className={cn(
             "block w-full text-left transition-colors py-1 hover:text-primary",
-            item.level === 1 ? "ml-3 text-xs text-muted-foreground" : "text-sm",
+            item.level === 1
+              ? "ml-3 text-xs md:text-sm text-muted-foreground"
+              : "text-sm md:text-base",
           )}
         >
           {item.level === 1 ? `• ${item.label}` : item.label}
@@ -38,5 +40,5 @@ const ResponsiveLayoutSidebar = (props: ResponsiveLayoutSidebarProps) => {
 };
 
 ResponsiveLayoutSidebar.displayName = "ResponsiveLayout";
-export default ResponsiveLayoutSidebar;
+export { ResponsiveLayoutSidebar };
 export type { ResponsiveLayoutSidebarItem };

src/pages/Docs.tsx

@@ -89,7 +89,7 @@ const Docs = () => {
 
         <div className="flex-1 relative">
           <div className="absolute inset-0 bg-gradient-hero opacity-5"></div>
-          <div>
+          <div className="container p-0">
             <Outlet />
           </div>
         </div>

src/pages/Docs/About.tsx

@@ -1,10 +1,11 @@
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { ResponsiveLayoutWrapper } from "@/components/ResponsiveLayout.tsx";
 import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code, Heart, Target, Users } from "lucide-react";
 
 const About = () => {
   return (
-    <div className="mx-auto space-y-8">
+    <ResponsiveLayoutWrapper className="mx-auto 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">
           Sobre o Devitools
@@ -149,7 +150,7 @@ const About = () => {
           </div>
         </div>
       </div>
-    </div>
+    </ResponsiveLayoutWrapper>
   );
 };
 

src/pages/Docs/Ecosystem.tsx

@@ -1,10 +1,11 @@
+import { ResponsiveLayoutWrapper } from "@/components/ResponsiveLayout.tsx";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { BookOpen, Code, FileText, Zap } from "lucide-react";
 
 const Guides = () => {
   return (
-    <div className="space-y-8">
+    <ResponsiveLayoutWrapper 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">
           Guias de Desenvolvimento
@@ -109,7 +110,7 @@ const Guides = () => {
           </div>
         </div>
       </div>
-    </div>
+    </ResponsiveLayoutWrapper>
   );
 };
 

src/pages/Docs/Guides.tsx

@@ -1,5 +1,6 @@
-import ResponsiveLayout, { ResponsiveLayoutRef } from "@/components/ResponsiveLayout.tsx";
-import ResponsiveLayoutSidebar, {
+import { ResponsiveLayout, ResponsiveLayoutRef } from "@/components/ResponsiveLayout.tsx";
+import {
+  ResponsiveLayoutSidebar,
   ResponsiveLayoutSidebarItem,
 } from "@/components/ResponsiveLayoutSidebar.tsx";
 import { Badge } from "@/components/ui/badge";

src/pages/Docs/Introduction.tsx

@@ -1,5 +1,6 @@
-import ResponsiveLayout, { ResponsiveLayoutRef } from "@/components/ResponsiveLayout.tsx";
-import ResponsiveLayoutSidebar, {
+import { ResponsiveLayout, ResponsiveLayoutRef } from "@/components/ResponsiveLayout.tsx";
+import {
+  ResponsiveLayoutSidebar,
   ResponsiveLayoutSidebarItem,
 } from "@/components/ResponsiveLayoutSidebar.tsx";
 import React, { useRef } from "react";