feat: implements new ResponsiveLayout component

Author: wilcorrea

src/components/docs/ResponsiveLayoutSidebar.tsx

@@ -7,14 +7,16 @@ interface ResponsiveLayoutSidebarItem {
   level?: number;
 }
 
-interface ResponsiveLayoutSidebarProps {
-  items: ResponsiveLayoutSidebarItem[];
-  onItemClick: (item: ResponsiveLayoutSidebarItem) => void;
+interface ResponsiveLayoutSidebarProps<T extends ResponsiveLayoutSidebarItem> {
+  items: T[];
+  onItemClick: (item: T) => void;
   title?: string;
   description?: string;
 }
 
-const ResponsiveLayoutSidebar = (props: ResponsiveLayoutSidebarProps) => {
+const ResponsiveLayoutSidebar = <T extends ResponsiveLayoutSidebarItem>(
+  props: ResponsiveLayoutSidebarProps<T>,
+) => {
   const { items, onItemClick, title = "", description = "" } = props;
 
   return (
@@ -41,4 +43,4 @@ const ResponsiveLayoutSidebar = (props: ResponsiveLayoutSidebarProps) => {
 
 ResponsiveLayoutSidebar.displayName = "ResponsiveLayout";
 export { ResponsiveLayoutSidebar };
-export type { ResponsiveLayoutSidebarItem };
+export type { ResponsiveLayoutSidebarItem, ResponsiveLayoutSidebarProps };

src/pages/Docs/Examples.tsx

@@ -6,23 +6,81 @@ import {
 import React, { useRef } from "react";
 import { Outlet, useNavigate } from "react-router-dom";
 
+interface Example extends ResponsiveLayoutSidebarItem {
+  path: string;
+}
+
 const Examples = () => {
   const layoutRef = useRef<ResponsiveLayoutRef>(null);
   const navigate = useNavigate();
-  const sidebarItems: ResponsiveLayoutSidebarItem[] = [
-    { id: "constructo", label: "Constructo" },
-    { id: "validacao-forms", label: "Validação de Forms", level: 1 },
-    { id: "gerenciamento-estado", label: "Gerenciamento de Estado", level: 1 },
-    { id: "serendipity", label: "Serendipity" },
-    { id: "apis-rest", label: "APIs REST", level: 1 },
-    { id: "cache-inteligente", label: "Cache Inteligente", level: 1 },
-    { id: "effulgence", label: "Effulgence" },
-    { id: "documentacao-api", label: "Documentação de API", level: 1 },
-    { id: "testes-automatizados", label: "Testes Automatizados", level: 1 },
+  const sidebarItems: Example[] = [
+    {
+      id: "constructo",
+      label: "Constructo",
+      path: "/docs/examples/constructo",
+    },
+    {
+      id: "constructo-builder",
+      label: "Explorando o Builder",
+      level: 1,
+      path: "/docs/examples/constructo#builder",
+    },
+    {
+      id: "constructo-demolisher",
+      label: "Utilizando o Demolisher",
+      level: 1,
+      path: "/docs/examples/constructo#demolisher",
+    },
+    {
+      id: "constructo-reflector",
+      label: "Exemplos de uso do Reflector",
+      level: 1,
+      path: "/docs/examples/constructo#reflector",
+    },
+    {
+      id: "constructo-faker",
+      label: "Testes com Faker",
+      level: 1,
+      path: "/docs/examples/constructo#reflector",
+    },
+    {
+      id: "serendipity",
+      label: "Serendipity",
+      path: "/docs/examples",
+    },
+    {
+      id: "apis-rest",
+      label: "APIs REST",
+      level: 1,
+      path: "/docs/examples",
+    },
+    {
+      id: "cache-inteligente",
+      label: "Cache Inteligente",
+      level: 1,
+      path: "/docs/examples",
+    },
+    {
+      id: "effulgence",
+      label: "Effulgence",
+      path: "/docs/examples",
+    },
+    {
+      id: "documentacao-api",
+      label: "Documentação de API",
+      level: 1,
+      path: "/docs/examples",
+    },
+    {
+      id: "testes-automatizados",
+      label: "Testes Automatizados",
+      level: 1,
+      path: "/docs/examples",
+    },
   ];
 
-  const handleItemClick = (item: ResponsiveLayoutSidebarItem) => {
-    navigate(`/docs/example/${item.id}`);
+  const handleItemClick = (item: Example) => {
+    navigate(item.path);
   };
 
   return (