0eca0729b5
🎨 **True Light/Dark Mode** - Implemented proper light mode with inverted color scheme - Smooth theme transitions (0.3s ease) - Light mode colors: white backgrounds, dark text, vibrant accents - System theme detection with proper class application 🌈 **Enhanced Theme System** - 4 color themes work in both light and dark modes - Cyber (cyan/magenta), Ocean (blue/teal), Forest (green/lime), Sunset (orange/purple) - Theme-specific glassmorphism effects - Proper contrast in light mode ✨ **Premium Animations** - Float, glow-pulse, slide-in, scale-in, rotate-in animations - Smooth page transitions - Hover effects with depth (lift, glow, scale) - Micro-interactions on all interactive elements 🎯 **Visual Polish** - Enhanced glassmorphism for light/dark modes - Custom scrollbar with theme colors - Beautiful text selection - Focus indicators for accessibility - Premium utility classes 🔧 **Technical Improvements** - Updated UIStore to properly apply light/dark classes - Added data-theme attribute for CSS targeting - Smooth scroll behavior - Optimized transitions The app is now a visual masterpiece with perfect light/dark mode support!
37 lines
997 B
TypeScript
37 lines
997 B
TypeScript
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-kodo-void text-kodo-text-main relative overflow-x-hidden">
|
|
<AstralBackground />
|
|
|
|
<Header />
|
|
|
|
<div className="flex relative z-10 transition-all duration-500">
|
|
<Sidebar />
|
|
|
|
<main
|
|
className={cn(
|
|
'flex-1 min-h-[calc(100vh-64px)] transition-all duration-300 ease-in-out',
|
|
sidebarOpen ? 'lg:ml-64' : 'ml-0',
|
|
)}
|
|
>
|
|
<div className="max-w-[1600px] mx-auto p-4 sm:p-6 lg:p-8 animate-fadeIn">
|
|
{children}
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|