Spaces:
Sleeping
Sleeping
| 'use client'; | |
| import { useState, useEffect } from 'react'; | |
| import Link from 'next/link'; | |
| import { usePathname } from 'next/navigation'; | |
| import { motion, AnimatePresence } from 'framer-motion'; | |
| import { | |
| LayoutDashboard, | |
| FlaskConical, | |
| Clock, | |
| History, | |
| Search, | |
| Settings, | |
| BookOpen, | |
| ChevronRight, | |
| LogOut, | |
| Dna, | |
| Menu, | |
| } from 'lucide-react'; | |
| import { useAuth } from '@/contexts/auth'; | |
| import { ThemeToggle } from '@/components/ThemeToggle'; | |
| import { ErrorBoundary } from '@/components/ErrorBoundary'; | |
| import { TutorialWalkthrough } from '@/components/TutorialWalkthrough'; | |
| const NAV_ITEMS = [ | |
| { href: '/dashboard', icon: LayoutDashboard, label: 'Dashboard' }, | |
| { href: '/analyze', icon: FlaskConical, label: 'Analyze' }, | |
| { href: '/retrieve', icon: Search, label: 'Retrieve' }, | |
| { href: '/jobs', icon: Clock, label: 'Jobs' }, | |
| { href: '/history', icon: History, label: 'History' }, | |
| { href: '/learn', icon: BookOpen, label: 'Learn' }, | |
| { href: '/settings', icon: Settings, label: 'Settings' }, | |
| ] as const; | |
| const labelVariants = { | |
| hidden: { opacity: 0, width: 0, transition: { duration: 0.15 } }, | |
| show: { opacity: 1, width: 'auto', transition: { duration: 0.2, delay: 0.05 } }, | |
| }; | |
| function SidebarContent({ | |
| collapsed, | |
| pathname, | |
| user, | |
| signOut, | |
| }: { | |
| collapsed: boolean; | |
| pathname: string; | |
| user: { email?: string | null } | null; | |
| signOut: () => void; | |
| }) { | |
| return ( | |
| <div className="flex flex-col h-full py-4"> | |
| <div className={`flex items-center gap-3 px-4 pb-5 mb-1 ${collapsed ? 'justify-center' : ''}`}> | |
| <div | |
| className="w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0" | |
| style={{ | |
| background: 'rgba(0,245,212,0.1)', | |
| border: '1px solid rgba(0,245,212,0.25)', | |
| boxShadow: '0 0 12px rgba(0,245,212,0.1)', | |
| }} | |
| > | |
| <Dna size={14} className="text-accent-cyan" /> | |
| </div> | |
| <AnimatePresence> | |
| {!collapsed && ( | |
| <motion.span | |
| key="logo-text" | |
| variants={labelVariants} | |
| initial="hidden" | |
| animate="show" | |
| exit="hidden" | |
| className="font-display text-sm font-semibold overflow-hidden whitespace-nowrap" | |
| > | |
| Bio <span className="text-gradient">Nexus</span> | |
| </motion.span> | |
| )} | |
| </AnimatePresence> | |
| </div> | |
| <div className="divider mx-4 mb-3" /> | |
| <nav className="flex-1 px-3 space-y-0.5"> | |
| {NAV_ITEMS.map(({ href, icon: Icon, label }) => { | |
| const active = pathname === href || (href !== '/dashboard' && pathname.startsWith(href + '/')); | |
| return ( | |
| <Link | |
| key={href} | |
| href={href} | |
| className={`nav-item ${active ? 'active' : ''} ${collapsed ? 'justify-center' : ''} group`} | |
| > | |
| {active && ( | |
| <motion.div | |
| layoutId="nav-indicator" | |
| className="absolute left-0 inset-y-[6px] w-[3px] rounded-full" | |
| style={{ background: 'var(--accent-cyan)' }} | |
| transition={{ type: 'spring', stiffness: 380, damping: 35 }} | |
| /> | |
| )} | |
| <Icon | |
| size={16} | |
| className="flex-shrink-0" | |
| strokeWidth={active ? 2 : 1.75} | |
| /> | |
| <AnimatePresence> | |
| {!collapsed && ( | |
| <motion.span | |
| key={`label-${href}`} | |
| variants={labelVariants} | |
| initial="hidden" | |
| animate="show" | |
| exit="hidden" | |
| className="overflow-hidden whitespace-nowrap text-sm" | |
| > | |
| {label} | |
| </motion.span> | |
| )} | |
| </AnimatePresence> | |
| {collapsed && ( | |
| <div | |
| className="absolute left-full ml-3 px-2.5 py-1.5 rounded-lg text-xs whitespace-nowrap text-text-primary pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity z-[100]" | |
| style={{ | |
| background: 'var(--bg-surface-2)', | |
| border: '1px solid var(--glass-border)', | |
| boxShadow: '0 4px 16px rgba(0,0,0,0.5)', | |
| }} | |
| > | |
| {label} | |
| </div> | |
| )} | |
| </Link> | |
| ); | |
| })} | |
| </nav> | |
| <div className="px-3 pt-3 space-y-1"> | |
| <div className="divider mb-3" /> | |
| {user && !collapsed && ( | |
| <div className="px-3 py-2"> | |
| <p className="text-[11px] text-text-muted font-mono truncate"> | |
| {user.email ?? 'Guest session'} | |
| </p> | |
| </div> | |
| )} | |
| <button | |
| onClick={signOut} | |
| className={`nav-item w-full text-left hover:!text-red-400 hover:!bg-red-500/10 ${collapsed ? 'justify-center' : ''} group`} | |
| > | |
| <LogOut size={15} className="flex-shrink-0" strokeWidth={1.75} /> | |
| <AnimatePresence> | |
| {!collapsed && ( | |
| <motion.span | |
| key="signout-label" | |
| variants={labelVariants} | |
| initial="hidden" | |
| animate="show" | |
| exit="hidden" | |
| className="overflow-hidden whitespace-nowrap text-sm" | |
| > | |
| Sign out | |
| </motion.span> | |
| )} | |
| </AnimatePresence> | |
| {collapsed && ( | |
| <div | |
| className="absolute left-full ml-3 px-2.5 py-1.5 rounded-lg text-xs whitespace-nowrap text-text-primary pointer-events-none opacity-0 group-hover:opacity-100 transition-opacity z-[100]" | |
| style={{ | |
| background: 'var(--bg-surface-2)', | |
| border: '1px solid var(--glass-border)', | |
| boxShadow: '0 4px 16px rgba(0,0,0,0.5)', | |
| }} | |
| > | |
| Sign out | |
| </div> | |
| )} | |
| </button> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export default function DashboardLayout({ children }: { children: React.ReactNode }) { | |
| const pathname = usePathname(); | |
| const { user, signOut } = useAuth(); | |
| const [collapsed, setCollapsed] = useState(false); | |
| const [mobileOpen, setMobileOpen] = useState(false); | |
| useEffect(() => { setMobileOpen(false); }, [pathname]); | |
| const sidebarBg = { | |
| background: 'rgba(8, 8, 18, 0.75)', | |
| borderRight: '1px solid rgba(100, 110, 180, 0.10)', | |
| backdropFilter: 'blur(24px) saturate(160%)', | |
| WebkitBackdropFilter: 'blur(24px) saturate(160%)', | |
| }; | |
| return ( | |
| <div className="flex h-screen bg-void overflow-hidden"> | |
| <motion.aside | |
| animate={{ width: collapsed ? 68 : 220 }} | |
| transition={{ duration: 0.28, ease: [0.25, 1, 0.5, 1] }} | |
| className="relative hidden md:flex flex-col flex-shrink-0 overflow-visible" | |
| style={sidebarBg} | |
| > | |
| <SidebarContent | |
| collapsed={collapsed} | |
| pathname={pathname} | |
| user={user} | |
| signOut={signOut} | |
| /> | |
| <button | |
| onClick={() => setCollapsed(!collapsed)} | |
| className="absolute -right-3 top-6 z-10 w-6 h-6 rounded-full flex items-center justify-center transition-all" | |
| style={{ | |
| background: 'var(--bg-surface-2)', | |
| border: '1px solid var(--glass-border)', | |
| }} | |
| onMouseEnter={(e) => { | |
| (e.currentTarget as HTMLButtonElement).style.borderColor = 'rgba(0,245,212,0.4)'; | |
| }} | |
| onMouseLeave={(e) => { | |
| (e.currentTarget as HTMLButtonElement).style.borderColor = 'var(--glass-border)'; | |
| }} | |
| aria-label={collapsed ? 'Expand sidebar' : 'Collapse sidebar'} | |
| > | |
| <ChevronRight | |
| size={11} | |
| className="text-text-muted transition-transform" | |
| style={{ transform: collapsed ? 'rotate(0deg)' : 'rotate(180deg)' }} | |
| /> | |
| </button> | |
| </motion.aside> | |
| <AnimatePresence> | |
| {mobileOpen && ( | |
| <> | |
| <motion.div | |
| key="backdrop" | |
| initial={{ opacity: 0 }} | |
| animate={{ opacity: 1 }} | |
| exit={{ opacity: 0 }} | |
| transition={{ duration: 0.2 }} | |
| className="fixed inset-0 z-40 md:hidden" | |
| style={{ background: 'rgba(4,4,10,0.8)', backdropFilter: 'blur(8px)' }} | |
| onClick={() => setMobileOpen(false)} | |
| /> | |
| <motion.aside | |
| key="drawer" | |
| initial={{ x: -240 }} | |
| animate={{ x: 0 }} | |
| exit={{ x: -240 }} | |
| transition={{ type: 'spring', damping: 32, stiffness: 300 }} | |
| className="fixed left-0 top-0 bottom-0 w-56 z-50 md:hidden overflow-hidden" | |
| style={sidebarBg} | |
| > | |
| <SidebarContent | |
| collapsed={false} | |
| pathname={pathname} | |
| user={user} | |
| signOut={signOut} | |
| /> | |
| </motion.aside> | |
| </> | |
| )} | |
| </AnimatePresence> | |
| <div className="flex-1 flex flex-col min-w-0 overflow-hidden"> | |
| <header | |
| className="flex items-center gap-4 px-6 py-4 flex-shrink-0" | |
| style={{ | |
| background: 'rgba(4,4,10,0.6)', | |
| borderBottom: '1px solid rgba(100,110,180,0.09)', | |
| backdropFilter: 'blur(12px)', | |
| }} | |
| > | |
| <button | |
| onClick={() => setMobileOpen(true)} | |
| className="md:hidden text-text-muted hover:text-text-primary transition-colors" | |
| aria-label="Open navigation" | |
| > | |
| <Menu size={18} /> | |
| </button> | |
| <div className="flex-1"> | |
| <span className="text-xs font-mono text-text-muted capitalize"> | |
| {pathname.split('/').filter(Boolean).join(' · ')} | |
| </span> | |
| </div> | |
| <ThemeToggle /> | |
| </header> | |
| <main className="flex-1 overflow-y-auto relative"> | |
| <div className="absolute inset-0 bg-grid pointer-events-none opacity-[0.025]" /> | |
| <div className="relative z-10 max-w-content mx-auto px-6 py-8"> | |
| <ErrorBoundary>{children}</ErrorBoundary> | |
| </div> | |
| </main> | |
| </div> | |
| <TutorialWalkthrough /> | |
| </div> | |
| ); | |
| } | |