Update page title in Root.jsx

webui/src/common/layouts/Root.jsx

@@ -1,22 +1,40 @@
 import React from 'react';
-import { Outlet } from 'react-router-dom';
+import {Outlet, useLocation} from 'react-router-dom';
 import Sidebar from '@/common/components/Sidebar';
 import ProfileMenu from '@/common/components/ProfileMenu';
 
+const getPageTitle = (pathname) => {
+    switch (pathname) {
+        case '/dashboard':
+            return 'Dashboard';
+        case '/servers':
+            return 'Servers';
+        case '/settings':
+            return 'Settings';
+        case '/admin/users':
+            return 'User Management';
+        default:
+            return 'Dashboard';
+    }
+};
+
 const Root = () => {
-  return (
+    const location = useLocation();
-    <div className="layout">
+    const pageTitle = getPageTitle(location.pathname);
-      <Sidebar />
+
-      <div className="main">
+    return (
-        <header className="topbar">
+        <div className="layout">
-          <h3>Dashboard</h3>
+            <Sidebar/>
-          <div className="grow"></div>
+            <div className="main">
-          <ProfileMenu />
+                <header className="topbar">
-        </header>
+                    <h3>{pageTitle}</h3>
-        <Outlet />
+                    <div className="grow"></div>
-      </div>
+                    <ProfileMenu/>
-    </div>
+                </header>
-  );
+                <Outlet/>
+            </div>
+        </div>
+    );
 };
 
 export default Root;