feat: implements new ResponsiveLayout component

Author: wilcorrea

src/components/ResponsiveLayout.tsx

@@ -1,5 +1,5 @@
 import { cn } from "@/lib/utils.ts";
-import React, { useRef } from "react";
+import React, { forwardRef, useImperativeHandle, useRef } from "react";
 import { Menu, X } from "lucide-react";
 
 interface ResponsiveLayoutProps {
@@ -8,11 +8,12 @@ interface ResponsiveLayoutProps {
   title?: string;
 }
 
-const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
-  leftContent,
-  rightContent,
-  title,
-}) => {
+interface ResponsiveLayoutRef {
+  closeSidebar: () => void;
+}
+
+const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>((props, ref) => {
+  const { leftContent, rightContent, title } = props;
   const sidebarRef = useRef<HTMLDivElement>(null);
   const backdropRef = useRef<HTMLDivElement>(null);
 
@@ -38,12 +39,21 @@ const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
     }
   };
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      closeSidebar: handleClose,
+    }),
+    [],
+  );
+
   return (
     <div className="flex relative min-h-[400px]">
+      {/* Backdrop */}
       <div
         ref={backdropRef}
         onClick={handleClose}
-        className="absolute inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-100 z-[5] lg:hidden"
+        className="fixed inset-0 bg-black opacity-0 pointer-events-none transition-opacity duration-100 z-[5] lg:hidden"
       />
 
       <div
@@ -55,10 +65,7 @@ const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
         )}
       >
         <div className="flex justify-end lg:hidden">
-          <button
-            onClick={handleClose}
-            className="hover:bg-destructive/50 rounded p-1 transition-colors"
-          >
+          <button onClick={handleClose} className="hover:bg-red-300 rounded p-1 transition-colors">
             <X className="h-5 w-5" />
           </button>
         </div>
@@ -69,7 +76,7 @@ const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
         <div className="flex items-center gap-3 mb-4">
           <button
             onClick={handleToggle}
-            className="lg:hidden shadow hover:shadow-md transition-all hover:bg-success/50"
+            className="lg:hidden shadow hover:shadow-md transition-all"
           >
             <Menu className="w-4 h-4" />
           </button>
@@ -83,6 +90,9 @@ const ResponsiveLayout: React.FC<ResponsiveLayoutProps> = ({
       </div>
     </div>
   );
-};
+});
+
+ResponsiveLayout.displayName = "ResponsiveLayout";
 
 export default ResponsiveLayout;
+export type { ResponsiveLayoutRef };

src/components/ResponsiveLayoutSidebar.tsx

@@ -0,0 +1,42 @@
+import { cn } from "@/lib/utils.ts";
+import React from "react";
+
+interface ResponsiveLayoutSidebarItem {
+  id: string;
+  label: string;
+  level?: number;
+}
+
+interface ResponsiveLayoutSidebarProps {
+  items: ResponsiveLayoutSidebarItem[];
+  onItemClick: (id: string) => void;
+  title?: string;
+  description?: string;
+}
+
+const ResponsiveLayoutSidebar = (props: ResponsiveLayoutSidebarProps) => {
+  const { items, onItemClick, title = "", description = "" } = props;
+
+  return (
+    <>
+      <div>{title}</div>
+      <p>{description}</p>
+      {items.map(item => (
+        <button
+          key={item.id}
+          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 ? `• ${item.label}` : item.label}
+        </button>
+      ))}
+    </>
+  );
+};
+
+ResponsiveLayoutSidebar.displayName = "ResponsiveLayout";
+export default ResponsiveLayoutSidebar;
+export type { ResponsiveLayoutSidebarItem };

src/pages/Docs/Introduction.tsx

@@ -1,20 +1,23 @@
-import { type SidebarItem } from "@/components/DocsResponsiveSidebar";
-import ResponsiveLayout from "@/components/ResponsiveLayout.tsx";
+import ResponsiveLayout, { ResponsiveLayoutRef } from "@/components/ResponsiveLayout.tsx";
+import ResponsiveLayoutSidebar, {
+  ResponsiveLayoutSidebarItem,
+} from "@/components/ResponsiveLayoutSidebar.tsx";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { cn } from "@/lib/utils.ts";
 import { Layers, Package, Wrench } from "lucide-react";
-import React from "react";
+import React, { useRef } from "react";
 
 const Introduction = () => {
+  const layoutRef = useRef<ResponsiveLayoutRef>(null);
   const scrollToSection = (id: string) => {
     const element = document.getElementById(id);
     if (element) {
       element.scrollIntoView({ behavior: "smooth" });
     }
+    layoutRef.current?.closeSidebar();
   };
 
-  const sidebarItems: SidebarItem[] = [
+  const sidebarItems: ResponsiveLayoutSidebarItem[] = [
     { id: "requisitos", label: "Começando do Começo", level: 0 },
     { id: "pacotes", label: "Pacotes Principais", level: 0 },
     { id: "constructo", label: "Constructo", level: 1 },
@@ -25,23 +28,9 @@ const Introduction = () => {
 
   return (
     <ResponsiveLayout
+      ref={layoutRef}
       title={"Começando do Começo"}
-      leftContent={
-        <div>
-          {sidebarItems.map(item => (
-            <button
-              key={item.id}
-              onClick={() => scrollToSection(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 ? `• ${item.label}` : item.label}
-            </button>
-          ))}
-        </div>
-      }
+      leftContent={<ResponsiveLayoutSidebar items={sidebarItems} onItemClick={scrollToSection} />}
       rightContent={
         <div className="space-y-8">
           <div className="space-y-4">