feat: Implementação de submenus laterais (flyout), correções de UI e proteção de rotas (AuthGuard)

front-end-agency/components/layout/DashboardLayout.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import React, { useState } from 'react';
+import { SidebarRail, MenuItem } from './SidebarRail';
+import { TopBar } from './TopBar';
+
+interface DashboardLayoutProps {
+    children: React.ReactNode;
+    menuItems: MenuItem[];
+}
+
+export const DashboardLayout: React.FC<DashboardLayoutProps> = ({ children, menuItems }) => {
+    // Estado centralizado do layout
+    const [isExpanded, setIsExpanded] = useState(true);
+    const [activeTab, setActiveTab] = useState('dashboard');
+
+    return (
+        <div className="flex h-screen w-full bg-gray-100 dark:bg-zinc-950 text-slate-900 dark:text-slate-100 overflow-hidden p-3 gap-3 transition-colors duration-300">
+            {/* Sidebar controla seu próprio estado visual via props */}
+            <SidebarRail
+                activeTab={activeTab}
+                onTabChange={setActiveTab}
+                isExpanded={isExpanded}
+                onToggle={() => setIsExpanded(!isExpanded)}
+                menuItems={menuItems}
+            />
+
+            {/* Área de Conteúdo (Children) */}
+            <main className="flex-1 h-full min-w-0 overflow-hidden flex flex-col bg-white dark:bg-zinc-900 rounded-2xl shadow-lg relative transition-colors duration-300 border border-transparent dark:border-zinc-800">
+                {/* TopBar com Breadcrumbs e Search */}
+                <TopBar />
+
+                {/* Conteúdo das páginas */}
+                <div className="flex-1 overflow-auto">
+                    {children}
+                </div>
+            </main>
+        </div>
+    );
+};