xertica-ui 1.4.13 → 1.5.0

package/components/Sidebar.tsx

@@ -4,14 +4,28 @@ import {
   ArrowLeft,
   LogOut,
   Settings,
-  MoreHorizontal,
+  MoreVertical,
   ChevronRight,
+  Filter,
 } from "lucide-react";
 // routes import removed to make it reusable
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { Tooltip, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuPortal,
+} from "./ui/dropdown-menu";
+import { ScrollArea } from "./ui/scroll-area";
+import { Input } from "./ui/input";
+import { Search as SearchIcon } from "lucide-react";
 import { cn } from "./ui/utils";
 import { XerticaLogo } from "./XerticaLogo";
 import { XerticaXLogo } from "./XerticaXLogo";
@@ -45,17 +59,29 @@ function SidebarTooltipContent({
 }
 
 // Interface for Route Config (copied/imported type)
+export interface ActionMenuItem {
+  label: string;
+  icon?: React.ComponentType<any>;
+  onClick?: (item: any) => void;
+  variant?: "default" | "destructive";
+  children?: ActionMenuItem[];
+}
+
 export interface RouteConfig {
   path: string;
   label: string;
   icon: React.ComponentType<any>;
   component?: React.ComponentType<any>;
+  actions?: ActionMenuItem[]; // Menus de hover (elipses)
+  description?: React.ReactNode; // Conteúdo auxiliar quando selecionado
 }
 
 interface SubMenuItem {
   id: string;
   label: string;
   path: string;
+  icon?: React.ComponentType<any>;
+  actions?: ActionMenuItem[];
 }
 
 interface NavigationItem {
@@ -66,6 +92,33 @@ interface NavigationItem {
   subItems?: SubMenuItem[];
 }
 
+export interface SidebarFilterConfig {
+  show: boolean;
+  content?: React.ReactNode;
+  icon?: React.ReactNode;
+}
+
+export interface SidebarSearchConfig {
+  show: boolean;
+  placeholder?: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  filter?: SidebarFilterConfig;
+}
+
+export interface SidebarFixedAreaConfig {
+  show: boolean;
+  content?: React.ReactNode;
+}
+
+export interface RouteGroup {
+  id: string;
+  label?: string; // Título do grupo
+  icon?: React.ComponentType<any>; // Ícone do grupo
+  items: RouteConfig[];
+  actions?: ActionMenuItem[]; // Menu contextual para o grupo inteiro
+}
+
 interface SidebarProps {
   expanded: boolean;
   onToggle: () => void;
@@ -73,9 +126,17 @@ interface SidebarProps {
   onLogout: () => void;
   location: { pathname: string };
   navigate: (path: string) => void;
-  routes: RouteConfig[];
+  routes?: RouteConfig[]; // tornado opcional devido ao assistant
   logo?: React.ReactNode;
   logoCollapsed?: React.ReactNode;
+
+  // Prop para definir qual comportamento renderizar
+  variant?: "default" | "assistant";
+
+  // Específicos do Assistant
+  fixedArea?: SidebarFixedAreaConfig;
+  search?: SidebarSearchConfig;
+  navigationGroups?: RouteGroup[];
 }
 
 export function Sidebar({
@@ -88,8 +149,13 @@ export function Sidebar({
   routes,
   logo,
   logoCollapsed,
+  variant = "default",
+  fixedArea,
+  search,
+  navigationGroups = [],
 }: SidebarProps) {
   const navRef = useRef<HTMLDivElement>(null);
+  const [localActiveItem, setLocalActiveItem] = useState<string | null>(null);
   const [hasOverflow, setHasOverflow] = useState(false);
   const [visibleItems, setVisibleItems] = useState<NavigationItem[]>([]);
   const [overflowItems, setOverflowItems] = useState<NavigationItem[]>([]);
@@ -111,7 +177,7 @@ export function Sidebar({
     ],
   };
 
-  const navigationItems: NavigationItem[] = routes.map((route) => ({
+  const navigationItems: NavigationItem[] = (routes || []).map((route) => ({
     ...route,
     label:
       labelTranslations[route.label.toLowerCase()] ||
@@ -126,6 +192,7 @@ export function Sidebar({
   useEffect(() => {
     const checkOverflow = () => {
       if (!navRef.current) return;
+      if (variant === "assistant") return;
 
       const navHeight = navRef.current.clientHeight;
       const itemHeight = 44; // h-10 + gap
@@ -148,6 +215,7 @@ export function Sidebar({
   }, [navigationItems.length]);
 
   const handleNavigate = (path: string) => {
+    setLocalActiveItem(path);
     navigate(path);
     setOpenSubmenu(null);
     // Fecha o menu no mobile após navegar
@@ -181,7 +249,7 @@ export function Sidebar({
               {item.label}
             </span>
             {hasSubItems && (
-              <MoreHorizontal className="w-4 h-4 flex-shrink-0 text-sidebar-foreground/60" />
+              <MoreVertical className="w-4 h-4 flex-shrink-0 text-sidebar-foreground/60" />
             )}
           </>
         )}
@@ -292,6 +360,132 @@ export function Sidebar({
     return simpleButton;
   };
 
+  const renderActionItems = (actions: ActionMenuItem[]) => {
+    return actions.map((action, idx) => {
+      const Icon = action.icon;
+
+      if (action.children && action.children.length > 0) {
+        return (
+          <DropdownMenuSub key={idx}>
+            <DropdownMenuSubTrigger>
+              {Icon && <Icon className="mr-2 h-4 w-4" />}
+              <span>{action.label}</span>
+            </DropdownMenuSubTrigger>
+            <DropdownMenuPortal>
+              <DropdownMenuSubContent className="w-48 bg-popover border-border">
+                {renderActionItems(action.children)}
+              </DropdownMenuSubContent>
+            </DropdownMenuPortal>
+          </DropdownMenuSub>
+        );
+      }
+
+      return (
+        <DropdownMenuItem
+          key={idx}
+          className={cn(
+            "flex items-center gap-2",
+            action.variant === "destructive" ? "text-destructive focus:text-destructive" : ""
+          )}
+          onClick={(e) => {
+            e.stopPropagation();
+            action.onClick?.(null);
+          }}
+        >
+          {Icon && <Icon className="h-4 w-4 flex-shrink-0" />}
+          <span>{action.label}</span>
+        </DropdownMenuItem>
+      );
+    });
+  };
+
+  const renderAssistantActionMenu = (actions?: ActionMenuItem[], isHeader: boolean = false) => {
+    if (!actions || actions.length === 0) return null;
+
+    return (
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn(
+              "h-8 w-8 text-sidebar-foreground/60 hover:bg-sidebar-foreground/20 hover:text-sidebar-foreground rounded-full transition-all",
+              !isHeader && "opacity-0 group-hover/item:opacity-100"
+            )}
+          >
+            <MoreVertical className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end" className="w-48 bg-popover border-border p-1">
+          {renderActionItems(actions)}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    );
+  };
+
+  const renderAssistantGroup = (group: RouteGroup) => {
+    return (
+      <div key={group.id} className="py-2 group">
+        {(group.label || group.icon) && (
+          <div className="flex items-center justify-between px-3 mb-1">
+            <div className="flex items-center gap-2 text-sidebar-foreground/60 text-xs font-semibold uppercase tracking-wider">
+              {group.icon && <group.icon className="h-4 w-4" />}
+              {expanded && group.label && <span>{group.label}</span>}
+            </div>
+            {expanded && renderAssistantActionMenu(group.actions, true)}
+          </div>
+        )}
+        <div className="space-y-1">
+          {group.items.map(item => {
+            const isRouteActive = location.pathname === item.path || location.pathname.startsWith(item.path + "/");
+            const isActive = isRouteActive || localActiveItem === item.path;
+            const Icon = item.icon;
+
+            const simpleBtn = (
+              <div
+                className={expanded
+                  ? `group/item flex items-start justify-between px-3 min-h-[36px] py-2.5 rounded-[var(--radius-button)] cursor-pointer transition-all duration-200 ${isActive ? 'bg-sidebar-foreground/15 text-sidebar-foreground' : 'text-sidebar-foreground/80 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground'}`
+                  : `group/item flex items-center justify-center h-10 px-0 rounded-[var(--radius-button)] cursor-pointer transition-all duration-200 ${isActive ? 'bg-sidebar-foreground/15 text-sidebar-foreground' : 'text-sidebar-foreground/80 hover:bg-sidebar-foreground/10 hover:text-sidebar-foreground'}`
+                }
+                onClick={() => handleNavigate(item.path)}
+              >
+                <div className="flex flex-col min-w-0 flex-1">
+                  <div className="flex items-center gap-3 overflow-hidden h-5">
+                    <Icon className="w-4 h-4 flex-shrink-0" />
+                    {expanded && <span className="truncate text-sm font-medium leading-none">{item.label}</span>}
+                  </div>
+                  {expanded && isActive && item.description && (
+                    <div className="ml-7 text-[11px] text-sidebar-foreground/60 mt-1.5 animate-in fade-in slide-in-from-top-1 duration-200">
+                      {item.description}
+                    </div>
+                  )}
+                </div>
+                {expanded && (
+                  <div className="h-5 flex items-center ml-1">
+                    {renderAssistantActionMenu(item.actions)}
+                  </div>
+                )}
+              </div>
+            );
+
+            return (
+              <div key={item.path}>
+                {!expanded ? (
+                  <Tooltip>
+                    <TooltipTrigger asChild>{simpleBtn}</TooltipTrigger>
+                    <SidebarTooltipContent side="right" sideOffset={0}>
+                      <p>{item.label}</p>
+                    </SidebarTooltipContent>
+                  </Tooltip>
+                ) : simpleBtn}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
   return (
     <TooltipProvider delayDuration={300}>
       {/* Sidebar */}
@@ -302,7 +496,7 @@ export function Sidebar({
           }`}
       >
         {/* Botão Toggle Menu */}
-        <div className="p-[14px] pt-[13px] pr-[14px] pb-[12px] pl-[14px]">
+        <div className="flex-shrink-0 p-[14px] pt-[13px] pr-[14px] pb-[12px] pl-[14px]">
           <button
             onClick={onToggle}
             className="w-full h-10 flex items-center gap-3 px-3 justify-center rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
@@ -316,7 +510,7 @@ export function Sidebar({
         </div>
 
         {/* Logo */}
-        <div className="px-4 py-4">
+        <div className="flex-shrink-0 px-4 py-4">
           <div
             className={`flex items-center h-10 ${expanded ? "justify-center" : "justify-center"}`}
           >
@@ -340,62 +534,121 @@ export function Sidebar({
           </div>
         </div>
 
-        {/* Navegação */}
-        <nav className="flex-1 px-4 py-4 overflow-hidden" ref={navRef}>
-          <div className="space-y-1">
-            {/* Itens visíveis */}
-            {(hasOverflow ? visibleItems : navigationItems).map((item) =>
-              renderMenuItem(item)
+        {/* Assistant-specific Header (Search/Fixed Area) - Always fixed when present */}
+        {variant === "assistant" && ((fixedArea && fixedArea.show) || (search && search.show)) && (
+          <div className="flex-shrink-0 px-4 pb-4 space-y-4 border-b border-sidebar-border/30 mb-2">
+            {fixedArea?.show && fixedArea.content && expanded && (
+              <div className="animate-in fade-in slide-in-from-top-1 duration-300">
+                {fixedArea.content}
+              </div>
             )}
-
-            {/* Botão de overflow (ellipsis) */}
-            {hasOverflow && (
-              <Popover>
-                <PopoverTrigger asChild>
-                  <button
-                    className={
-                      expanded
-                        ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
-                        : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
-                    }
-                  >
-                    <MoreHorizontal className="w-5 h-5 flex-shrink-0" />
-                    {expanded && (
-                      <span className="truncate text-sidebar-foreground">
-                        Mais opções
-                      </span>
-                    )}
-                  </button>
-                </PopoverTrigger>
-                <PopoverContent
-                  side="right"
-                  align="start"
-                  className="w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg"
-                  sideOffset={8}
-                >
-                  <div className="space-y-1">
-                    {overflowItems.map((item) => {
-                      const Icon = item.icon;
-                      return (
-                        <button
-                          key={item.path}
-                          onClick={() => handleNavigate(item.path)}
-                          className="w-full h-9 flex items-center gap-2 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground text-left"
-                        >
-                          <Icon className="w-4 h-4 flex-shrink-0" />
-                          <span className="truncate">{item.label}</span>
-                        </button>
-                      );
-                    })}
-                  </div>
-                </PopoverContent>
-              </Popover>
+            {search?.show && expanded && (
+              <div className="flex items-center gap-2">
+                <div className="relative flex-1">
+                  <SearchIcon className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-sidebar-foreground/50" />
+                  <Input
+                    type="text"
+                    placeholder={search.placeholder || "Buscar..."}
+                    value={search.value}
+                    onChange={(e) => search.onChange?.(e.target.value)}
+                    className="w-full h-9 bg-sidebar-foreground/10 border-sidebar-border text-sidebar-foreground placeholder:text-sidebar-foreground/50 pl-9 focus-visible:ring-1 focus-visible:ring-sidebar-foreground/30 focus-visible:ring-offset-0"
+                  />
+                </div>
+                {search.filter?.show && search.filter.content && (
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <Button variant="ghost" size="icon" className="h-9 w-9 text-sidebar-foreground hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground">
+                        {search.filter.icon || <Filter className="h-4 w-4" />}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent side="bottom" align="end" className="w-64 p-0 bg-popover border-border">
+                      {search.filter.content}
+                    </PopoverContent>
+                  </Popover>
+                )}
+              </div>
+            )}
+            {(!expanded && (fixedArea?.show || search?.show)) && (
+              <div className="flex flex-col items-center gap-2">
+                {search?.show && (
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <button className="h-10 w-10 flex items-center justify-center rounded-[var(--radius-button)] text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground">
+                        <SearchIcon className="h-5 w-5" />
+                      </button>
+                    </TooltipTrigger>
+                    <SidebarTooltipContent side="right">Buscar</SidebarTooltipContent>
+                  </Tooltip>
+                )}
+              </div>
             )}
           </div>
-        </nav>
+        )}
+
+        {/* Main Content Area - Scrollable */}
+        <div className="flex-1 min-h-0 overflow-hidden">
+          {variant === "default" ? (
+            <nav className="h-full px-4 py-4 overflow-hidden" ref={navRef}>
+              <div className="space-y-1">
+                {/* Itens visíveis */}
+                {(hasOverflow ? visibleItems : navigationItems).map((item) =>
+                  renderMenuItem(item)
+                )}
+
+                {/* Botão de overflow (ellipsis) */}
+                {hasOverflow && (
+                  <Popover>
+                    <PopoverTrigger asChild>
+                      <button
+                        className={
+                          expanded
+                            ? "w-full h-10 flex items-center gap-3 px-3 justify-start rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+                            : "w-full h-10 flex items-center justify-center px-0 rounded-[var(--radius-button)] transition-all duration-200 text-sidebar-foreground/80 hover:bg-sidebar-foreground/15 hover:text-sidebar-foreground"
+                        }
+                      >
+                        <MoreVertical className="w-5 h-5 flex-shrink-0" />
+                        {expanded && (
+                          <span className="truncate text-sidebar-foreground">
+                            Mais opções
+                          </span>
+                        )}
+                      </button>
+                    </PopoverTrigger>
+                    <PopoverContent
+                      side="right"
+                      align="start"
+                      className="w-56 p-2 bg-popover border border-border rounded-[var(--radius-card)] shadow-lg"
+                      sideOffset={8}
+                    >
+                      <div className="space-y-1">
+                        {overflowItems.map((item) => {
+                          const Icon = item.icon;
+                          return (
+                            <button
+                              key={item.path}
+                              onClick={() => handleNavigate(item.path)}
+                              className="w-full h-9 flex items-center gap-2 px-3 rounded-[var(--radius-button)] transition-all duration-200 text-popover-foreground/80 hover:bg-accent hover:text-accent-foreground text-left"
+                            >
+                              <Icon className="w-4 h-4 flex-shrink-0" />
+                              <span className="truncate">{item.label}</span>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </PopoverContent>
+                  </Popover>
+                )}
+              </div>
+            </nav>
+          ) : (
+            <ScrollArea className="h-full px-4">
+              {navigationGroups.map(group => renderAssistantGroup(group))}
+            </ScrollArea>
+          )}
+        </div>
 
         {/* Footer da sidebar - Usuário */}
-        <div className="p-4 space-y-2">
+        <div className="flex-shrink-0 p-4 space-y-2">
           {/* Avatar do usuário */}
           {!expanded ? (
             <Tooltip>

package/components/TemplateContent.tsx

@@ -14,7 +14,7 @@ import { Textarea } from './ui/textarea';
 import { Progress } from './ui/progress';
 import { Separator } from './ui/separator';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './ui/table';
-import { Settings, User, Mail, Phone, Calendar, Search, Menu, ChevronRight, Home, Users } from 'lucide-react';
+import { Settings, User, Mail, Phone, Calendar, Search, Menu, ChevronRight, Home, Users, Plus, Trash2, Archive, ArrowRightLeft, History, FileEdit, Filter, Clock, Map } from 'lucide-react';
 import { Slider } from './ui/slider';
 import { toast } from 'sonner';
 import { ScrollArea } from './ui/scroll-area';
@@ -22,6 +22,7 @@ import { ThemeToggle } from './ThemeToggle';
 import { LanguageSelector } from './LanguageSelector';
 import { MapShowcase } from './examples/MapShowcase';
 import { Header } from './Header';
+import { Sidebar } from './Sidebar';
 import {
   Dialog,
   DialogTrigger,
@@ -713,6 +714,134 @@ export function TemplateContent({ }: TemplateContentProps) {
 
               <Separator className="my-8" />
 
+              {/* Sidebar Variations */}
+              <section>
+                <h3 className="mb-4">Sidebar Variations</h3>
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Sidebar Assistant Mode vs Default</CardTitle>
+                    <CardDescription>
+                      A Sidebar suporta flexibilidade com a propriedade variant.
+                    </CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <Tabs defaultValue="assistant" className="w-full">
+                      <TabsList className="mb-4">
+                        <TabsTrigger value="assistant">Modo Assistant</TabsTrigger>
+                        <TabsTrigger value="default">Modo Padrão</TabsTrigger>
+                      </TabsList>
+
+                      <TabsContent value="assistant">
+                        <div className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
+                          <Sidebar
+                            expanded={true}
+                            onToggle={() => { }}
+                            user={{ email: "admin@xertica.com" }}
+                            onLogout={() => toast("Saiu")}
+                            location={{ pathname: "/assistant/current" }}
+                            navigate={() => { }}
+                            variant="assistant"
+                            search={{
+                              show: true,
+                              placeholder: "Pesquisar tópicos..."
+                            }}
+                            fixedArea={{
+                              show: true,
+                              content: (
+                                <Button className="w-full bg-sidebar-primary hover:bg-sidebar-primary/90 text-sidebar-primary-foreground shadow-lg font-bold border-none transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98]">
+                                  <Plus className="w-4 h-4 mr-2" />
+                                  Nova Conversa
+                                </Button>
+                              )
+                            }}
+                            navigationGroups={[
+                              {
+                                id: "recent",
+                                label: "Recentes",
+                                icon: Clock,
+                                items: [
+                                  {
+                                    path: "/assistant/refatoracao",
+                                    label: "Refatoração Sidebar",
+                                    icon: History,
+                                    description: "Ativa agora",
+                                    actions: [
+                                      { label: "Renomear", icon: FileEdit, onClick: () => toast("Abrir renomear...") },
+                                      { 
+                                        label: "Mover", 
+                                        icon: ArrowRightLeft,
+                                        children: [
+                                          { label: "Projetos Ativos", onClick: () => toast("Movido para Projetos Ativos") },
+                                          { label: "Monitoramento", onClick: () => toast("Movido para Monitoramento") },
+                                          { label: "Arquivo", onClick: () => toast("Movido para Arquivo") }
+                                        ] 
+                                      },
+                                      { label: "Limpar", icon: Trash2, onClick: () => toast("Histórico Limpo!"), variant: "destructive" }
+                                    ]
+                                  },
+                                ]
+                              },
+                              {
+                                id: "projects",
+                                label: "Monitoramento de Obras",
+                                icon: Map,
+                                actions: [
+                                  { label: "Nova Categoria", icon: Plus, onClick: () => toast("Criar nova categoria...") },
+                                  { label: "Arquivar Grupo", icon: Archive, onClick: () => toast("Arquivando grupo...") }
+                                ],
+                                items: [
+                                  {
+                                    path: "/assistant/br163",
+                                    label: "Restauração BR-163",
+                                    icon: () => <div className="w-2 h-2 rounded-full bg-yellow-500" />,
+                                    description: (
+                                      <div className="space-y-1.5 min-w-[160px]">
+                                        <Progress value={67} className="h-1.5 bg-sidebar-foreground/10" />
+                                        <div className="flex justify-between items-center text-[10px] text-sidebar-foreground/60">
+                                          <span>Cuiabá, MT</span>
+                                          <span>67%</span>
+                                        </div>
+                                      </div>
+                                    )
+                                  }
+                                ]
+                              }
+                            ]}
+                          />
+                          <div className="absolute inset-y-0 right-0 left-64 p-8 flex items-center justify-center">
+                            <p className="text-muted-foreground text-center">Conteúdo do Assistant Mode</p>
+                          </div>
+                        </div>
+                      </TabsContent>
+
+                      <TabsContent value="default">
+                        <div className="relative h-[600px] border rounded-[var(--radius-lg)] bg-muted/20 overflow-hidden" style={{ transform: "translateZ(0)" }}>
+                          <Sidebar
+                            expanded={true}
+                            onToggle={() => { }}
+                            user={{ email: "admin@xertica.com" }}
+                            onLogout={() => toast("Saiu")}
+                            location={{ pathname: "/home" }}
+                            navigate={() => { }}
+                            variant="default"
+                            routes={[
+                              { path: "/home", label: "Início", icon: Home },
+                              { path: "/dashboard", label: "Dashboard", icon: Users },
+                              { path: "/settings", label: "Configurações", icon: Settings },
+                            ]}
+                          />
+                          <div className="absolute inset-y-0 right-0 left-64 p-8 flex items-center justify-center">
+                            <p className="text-muted-foreground text-center">Navegação Tradicional do Sistema</p>
+                          </div>
+                        </div>
+                      </TabsContent>
+                    </Tabs>
+                  </CardContent>
+                </Card>
+              </section>
+
+              <Separator className="my-8" />
+
               {/* Footer Note */}
               <Card className="mt-8">
                 <CardHeader>