feat: implements new ResponsiveLayout component

Author: wilcorrea

src/components/docs/ResponsiveLayout.tsx

@@ -55,7 +55,7 @@ const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>(
   );
 
   return (
-    <div className="flex relative min-h-[400px]">
+    <div className="flex relative min-h-[calc(100vh-140px)]">
       {/* Backdrop */}
       <div
         ref={backdropRef}
@@ -66,7 +66,7 @@ const ResponsiveLayout = forwardRef<ResponsiveLayoutRef, ResponsiveLayoutProps>(
       <ResponsiveLayoutWrapper
         ref={sidebarRef}
         className={cn(
-          "w-3/12 lg:w-2/12 min-w-[240px] md:min-w-fit h-full -translate-x-full transition-transform duration-100",
+          "w-3/12 lg:w-2/12 min-w-[240px] md:min-w-fit h-full overflow-auto -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",
         )}

src/pages/Docs/Reference.tsx

@@ -3,11 +3,16 @@ import {
   ResponsiveLayoutSidebar,
   ResponsiveLayoutSidebarItem,
 } from "@/components/docs/ResponsiveLayoutSidebar.tsx";
-import React, { useRef } from "react";
-import { Outlet, useNavigate } from "react-router-dom";
+import React, { useRef, useState } from "react";
+import { Outlet, useLocation, useNavigate } from "react-router-dom";
+
+function formatSolutionHeader(current: ResponsiveLayoutSidebarItem | undefined) {
+  return current ? `Nossa Solução: ${current.label}` : "Nossas Soluções";
+}
 
 const Reference = () => {
   const layoutRef = useRef<ResponsiveLayoutRef>(null);
+  const location = useLocation();
   const navigate = useNavigate();
   const sidebarItems: ResponsiveLayoutSidebarItem[] = [
     {
@@ -51,15 +56,20 @@ const Reference = () => {
       level: 0,
     },
   ];
+  const current = sidebarItems.find(item => location.pathname === `/docs/reference/${item.id}`);
+  const initialTitle = formatSolutionHeader(current);
+  const [title, setTitle] = useState(initialTitle);
 
   const handleItemClick = (item: ResponsiveLayoutSidebarItem) => {
+    setTitle(formatSolutionHeader(item));
+    layoutRef.current?.closeSidebar();
     navigate(`/docs/reference/${item.id}`);
   };
 
   return (
     <ResponsiveLayout
       ref={layoutRef}
-      title={"Nossas Soluções"}
+      title={title}
       leftContent={<ResponsiveLayoutSidebar items={sidebarItems} onItemClick={handleItemClick} />}
       rightContent={
         <div className="relative">