| |
| |
| |
| |
|
|
| import React from 'react' |
| import { Outlet } from 'react-router-dom' |
| import { motion, AnimatePresence } from 'framer-motion' |
| import Sidebar from './Sidebar' |
| import StatusBar from './StatusBar' |
| import useAppStore from '../../stores/appStore' |
|
|
| export default function AppLayout() { |
| const sidebarOpen = useAppStore((s) => s.sidebarOpen) |
|
|
| return ( |
| <div className="flex h-screen bg-jarvis-bg overflow-hidden relative"> |
| {/* Background grid */} |
| <div className="absolute inset-0 bg-grid opacity-60 pointer-events-none" /> |
| |
| {/* Sidebar */} |
| <AnimatePresence initial={false}> |
| {sidebarOpen && ( |
| <motion.div |
| key="sidebar" |
| initial={{ x: -280, opacity: 0 }} |
| animate={{ x: 0, opacity: 1 }} |
| exit={{ x: -280, opacity: 0 }} |
| transition={{ type: 'spring', stiffness: 300, damping: 30 }} |
| className="relative z-10 flex-shrink-0" |
| > |
| <Sidebar /> |
| </motion.div> |
| )} |
| </AnimatePresence> |
| |
| {/* Main content */} |
| <div className="flex flex-col flex-1 min-w-0 relative z-0"> |
| <StatusBar /> |
| <main className="flex-1 overflow-hidden"> |
| <Outlet /> |
| </main> |
| </div> |
| </div> |
| ) |
| } |
|
|
