32 lines
985 B
TypeScript
32 lines
985 B
TypeScript
import { useState } from 'react';
|
|
import { Outlet } from 'react-router-dom';
|
|
import Sidebar from './Sidebar';
|
|
import TopBar from './TopBar';
|
|
import SecurityBanners from '../SecurityBanners';
|
|
|
|
export default function AppLayout() {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
|
|
return (
|
|
<div className="flex h-screen overflow-hidden" style={{ background: 'var(--bg)' }}>
|
|
{/* Mobile backdrop */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 z-40 bg-black/50 md:hidden"
|
|
onClick={() => setSidebarOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
<Sidebar mobileOpen={sidebarOpen} onMobileClose={() => setSidebarOpen(false)} />
|
|
|
|
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
<TopBar onMenuClick={() => setSidebarOpen((o) => !o)} />
|
|
<SecurityBanners />
|
|
<main className="flex-1 overflow-auto" style={{ padding: '22px 28px' }}>
|
|
<Outlet />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|