feat: implement dynamic mobile header with centered page title and adaptive layout

app/(backend)/layout.tsx

@@ -3,6 +3,7 @@
 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;
@@ -10,6 +11,21 @@ interface LayoutProps {
 
 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">
@@ -26,7 +42,11 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
       <div
         className={`flex min-h-screen flex-col transition-all duration-300 md:pl-64`}
       >
-        <Header onMenuClick={() => setSidebarOpen(!sidebarOpen)} />
+        <Header 
+          onMenuClick={() => setSidebarOpen(!sidebarOpen)} 
+          pageTitle={getPageTitle(pathname)} 
+        />
+        
         <main className="animate-in fade-in flex-1 p-4 duration-500 md:p-8">
           {children}
         </main>
@@ -35,4 +55,4 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   );
 };
 
-export default Layout;
+export default Layout;