feat: add theme-based layouts

Each theme now has a unique layout:
- Light: Standard fixed sidebar
- Vibrant: Horizontal top navigation
- Corporate: Compact sidebar (expands on hover)
- Dark: Floating sidebar with glass effect

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

apps/web/app/(dashboard)/layout.tsx

@@ -3,7 +3,13 @@
 import { useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { useAuthStore } from '@/stores/auth-store';
+import { useThemeStore } from '@/stores/theme-store';
+import { themes } from '@/themes';
 import { Sidebar } from '@/components/layouts/sidebar';
+import { TopNav } from '@/components/layouts/topnav';
+import { SidebarCompact } from '@/components/layouts/sidebar-compact';
+import { SidebarFloating } from '@/components/layouts/sidebar-floating';
+import { cn } from '@/lib/utils';
 
 export default function DashboardLayout({
   children,
@@ -12,6 +18,10 @@ export default function DashboardLayout({
 }) {
   const router = useRouter();
   const { isAuthenticated } = useAuthStore();
+  const { theme } = useThemeStore();
+
+  const currentTheme = themes[theme];
+  const layout = currentTheme.layout;
 
   useEffect(() => {
     if (!isAuthenticated) {
@@ -23,10 +33,42 @@ export default function DashboardLayout({
     return null;
   }
 
+  // Render layout based on theme
+  const renderNavigation = () => {
+    switch (layout) {
+      case 'topnav':
+        return <TopNav />;
+      case 'sidebar-compact':
+        return <SidebarCompact />;
+      case 'sidebar-floating':
+        return <SidebarFloating />;
+      case 'sidebar-standard':
+      default:
+        return <Sidebar />;
+    }
+  };
+
+  const getContentClasses = () => {
+    switch (layout) {
+      case 'topnav':
+        return 'pt-16'; // Top padding for fixed top nav
+      case 'sidebar-compact':
+        return 'pl-16'; // Small left padding for compact sidebar
+      case 'sidebar-floating':
+        return 'pl-72 pr-4 py-4'; // Padding for floating sidebar
+      case 'sidebar-standard':
+      default:
+        return 'pl-64'; // Standard sidebar width
+    }
+  };
+
   return (
-    <div className="min-h-screen bg-background">
-      <Sidebar />
-      <div className="pl-64">
+    <div className={cn(
+      'min-h-screen bg-background',
+      layout === 'sidebar-floating' && 'bg-gradient-to-br from-background via-background to-muted/20'
+    )}>
+      {renderNavigation()}
+      <div className={getContentClasses()}>
         {children}
       </div>
     </div>