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

import { ReactNode } from 'react';
import { AnimatePresence } from 'framer-motion';
import { Header } from './Header';
import { Sidebar } from './Sidebar';
import { PageTransition } from './PageTransition';
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-[var(--duration-slow)]">
        <Sidebar />

        <main
          className={cn(
            'flex-1 min-h-layout-main transition-all duration-[var(--duration-normal)] ease-[var(--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">
            <AnimatePresence mode="wait">
              <PageTransition>
                {children}
              </PageTransition>
            </AnimatePresence>
          </div>
        </main>
      </div>
    </div>
  );
}