veza/apps/web/src/components/layout/Layout.tsx

import { ReactNode } from 'react';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { useUIStore } from '@/stores/ui';
import { cn } from '@/lib/utils';
import { AstralBackground } from '../ui/AstralBackground';

interface LayoutProps {
  children: ReactNode;
}

export function Layout({ children }: LayoutProps) {
  const { sidebarOpen } = useUIStore();

  return (
    <div className="min-h-screen bg-background text-foreground relative overflow-x-hidden">
      <AstralBackground />

      <Header />

      <div className="flex relative z-10 transition-all duration-500">
        <Sidebar />

        <main
          className={cn(
            'flex-1 min-h-layout-main transition-all duration-300 ease-in-out',
            sidebarOpen ? 'lg:ml-64' : 'ml-0',
          )}
        >
          <div className="max-w-layout-content mx-auto p-4 sm:p-6 lg:p-8 animate-fadeIn">
            {children}
          </div>
        </main>
      </div>
    </div>
  );
}