58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import Header from "@/components/Header/index";
|
|
import Sidebar from "@/components/Sidebar";
|
|
import React, { useState } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const Layout: React.FC<LayoutProps> = ({ children }) => {
|
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
|
const pathname = usePathname();
|
|
|
|
const getPageTitle = (path: string) => {
|
|
if (path === "/") return "Overview";
|
|
|
|
const titles: Record<string, string> = {
|
|
"/users": "Users",
|
|
"/settings": "Settings",
|
|
"/profile": "Profile",
|
|
"/songs": "Songs Database",
|
|
"/events": "Worship & Events",
|
|
};
|
|
|
|
return titles[path] || "Dashboard";
|
|
};
|
|
|
|
return (
|
|
<div className="dashboard">
|
|
<Sidebar open={sidebarOpen} close={() => setSidebarOpen(false)} />
|
|
|
|
{/* Mobile Sidebar Overlay */}
|
|
{sidebarOpen && (
|
|
<div
|
|
className="fixed inset-0 z-40 bg-black/50 md:hidden"
|
|
onClick={() => setSidebarOpen(false)}
|
|
/>
|
|
)}
|
|
|
|
<div
|
|
className={`flex min-h-screen flex-col transition-all duration-300 md:pl-64`}
|
|
>
|
|
<Header
|
|
onMenuClick={() => setSidebarOpen(!sidebarOpen)}
|
|
pageTitle={getPageTitle(pathname)}
|
|
/>
|
|
|
|
<main className="animate-in fade-in flex-1 p-4 duration-500 md:p-8">
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout; |