'use client'; import { useEffect, useState } from 'react'; import { useRouter, usePathname } from 'next/navigation'; import Link from 'next/link'; import { useAuth } from '@/lib/auth-context'; import { Avatar } from '@/components/ui/avatar'; function formatBytes(bytes: number): string { if (bytes === 0) return '0 B'; const k = 1024; const sizes = ['B', 'KB', 'MB', 'GB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`; } export default function DashboardLayout({ children }: { children: React.ReactNode }) { const { user, loading, logout } = useAuth(); const router = useRouter(); const pathname = usePathname(); const [sidebarOpen, setSidebarOpen] = useState(false); useEffect(() => { if (!loading && !user) { router.push('/login'); } }, [user, loading, router]); // Close drawer on route change useEffect(() => { setSidebarOpen(false); }, [pathname]); if (loading) { return (
Loading…
); } if (!user) return null; const isActive = (href: string) => href === '/' ? pathname === '/' : pathname.startsWith(href); const SidebarContent = () => ( <> {/* Logo */}
VidReview
{/* Nav */} {/* User / logout */}
{/* Storage quota bar */} {(user.storageQuota ?? 0) > 0 && (
Storage {formatBytes(user.storageUsed ?? 0)} / {formatBytes(user.storageQuota ?? 0)}
0.85 ? '#EF4444' : '#6366F1', }} />
)}

{user.name}

{user.globalRole.toLowerCase()}

); return (
{/* ── Mobile hamburger button ─────────────────────────── */} {/* ── Mobile overlay backdrop ─────────────────────────── */} {sidebarOpen && (
setSidebarOpen(false)} /> )} {/* ── Sidebar (drawer on mobile, fixed sidebar on desktop) ─ */} {/* ── Main content (padding-left on desktop for fixed sidebar, padding-top on mobile for hamburger) ─── */}
{children}
); } function NavSection({ label, children }: { label?: string; children: React.ReactNode }) { return (
{label && (

{label}

)} {children}
); } function NavLink({ href, active, icon, children, onClick, }: { href: string; active: boolean; icon: React.ReactNode; children: React.ReactNode; onClick?: () => void; }) { return ( {icon} {children} ); }