chore: align the page name to the right

src/components/AppHeader.jsx

@@ -14,7 +14,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
   };
 
   const [drawerExpanded, setDrawerExpanded] = useState(true);
-  const [currentPage, setCurrentPage] = useState('Dashboard'); // track current page
+  const [currentPage, setCurrentPage] = useState('Dashboard'); 
   const { user } = useAuth();
 
   const isPrivate = zone === 'private';
@@ -24,10 +24,8 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
   const navigate = useNavigate();
 
   const handleMenuSelect = (page) => {
-    setCurrentPage(page);     // update page title
-    onSelectMenuItem?.(page); // still notify parent
-    // you can also navigate if you have routes:
-    // navigate(`/${page.toLowerCase().replace(/\s+/g, '-')}`);
+    setCurrentPage(page);
+    onSelectMenuItem?.(page); 
   };
 
   return (
@@ -43,8 +41,6 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
         right: 0,
       }} >
       <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
-
-        {/* LEFT SIDE: Current Page */}
         <Box
           sx={{
             display: 'flex',
@@ -55,7 +51,7 @@ export default function AppHeader({ zone = 'public', onSelectMenuItem }) {
           <Typography
             variant="h6"
             noWrap
-            sx={{ color: '#40120EFF', fontWeight: 600 }}
+            sx={{ color: '#40120EFF', fontWeight:'light', fontSize: '30px'}}
           >
             {currentPage}
           </Typography>