51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { usePathname } from 'next/navigation';
|
|
import { Sidebar } from '@/components/layouts/Sidebar';
|
|
import { Header } from '@/components/layouts/Header';
|
|
import { NavigationProgress } from '@/components/layouts/NavigationProgress';
|
|
|
|
export default function AdminLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
const pathname = usePathname();
|
|
const [collapsed, setCollapsed] = useState(false);
|
|
const [mobileOpen, setMobileOpen] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setMobileOpen(false);
|
|
}, [pathname]);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-background">
|
|
<NavigationProgress />
|
|
{mobileOpen && (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-15 lg:hidden"
|
|
onClick={() => setMobileOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
{mobileOpen && (
|
|
<div className="lg:hidden">
|
|
<Sidebar collapsed={false} overlay onToggle={() => setMobileOpen(false)} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex min-h-screen min-w-0">
|
|
<div className="hidden lg:block sticky top-0 h-screen z-20 shrink-0">
|
|
<Sidebar collapsed={collapsed} onToggle={() => setCollapsed((open) => !open)} />
|
|
</div>
|
|
<div className="flex-1 min-w-0 overflow-x-hidden">
|
|
<Header onMenuToggle={() => setMobileOpen((open) => !open)} />
|
|
<main id="main-content" className="p-3 sm:p-4 lg:p-5 min-w-0">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|