39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { Outlet, useLocation } from 'react-router-dom';
|
|
import { Header } from './Header';
|
|
import { Sidebar } from './Sidebar';
|
|
|
|
export function Layout() {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const location = useLocation();
|
|
|
|
// Determine title from current route
|
|
const getTitle = () => {
|
|
const path = location.pathname.replace('/', '');
|
|
if (!path || path === 'dashboard') {return 'Dashboard';}
|
|
|
|
// Handle nested routes
|
|
if (path.includes('/')) {
|
|
const parts = path.split('/');
|
|
// For system routes, show the sub-page name
|
|
if (parts[0] === 'system' && parts[1]) {
|
|
return parts[1].charAt(0).toUpperCase() + parts[1].slice(1);
|
|
}
|
|
}
|
|
|
|
return path.charAt(0).toUpperCase() + path.slice(1);
|
|
};
|
|
|
|
return (
|
|
<div className="h-full">
|
|
<Sidebar sidebarOpen={sidebarOpen} setSidebarOpen={setSidebarOpen} />
|
|
<Header setSidebarOpen={setSidebarOpen} title={getTitle()} />
|
|
|
|
<main className="py-8 lg:pl-60 w-full h-full overflow-y-auto">
|
|
<div className="px-8 flex-col h-full">
|
|
<Outlet />
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|