feat: change pages structure to avoid dashboard menu refresh

src/app/(dashboard)/jobmonitor/layout.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 export default function JobMonitorLayout({
   children,
 }: {

src/app/(dashboard)/layout.tsx

@@ -0,0 +1,33 @@
+"use client";
+import * as React from "react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { Box } from "@mui/material";
+import { useMUITheme } from "@/hooks/theme";
+import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
+import Dashboard from "@/components/layout/Dashboard";
+
+export default function JobMonitorLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const theme = useMUITheme();
+
+  return (
+    <section>
+      <Dashboard>
+        <MUIThemeProvider theme={theme}>
+          <CssBaseline />
+          <Box
+            sx={{
+              ml: "5%",
+              mr: "5%",
+            }}
+          >
+            {children}
+          </Box>
+        </MUIThemeProvider>
+      </Dashboard>
+    </section>
+  );
+}

src/components/applications/JobMonitor.tsx

@@ -15,19 +15,9 @@ export default function JobMonitor() {
   const theme = useMUITheme();
 
   return (
-    <Dashboard>
-      <MUIThemeProvider theme={theme}>
-        <CssBaseline />
-        <Box
-          sx={{
-            ml: "5%",
-            mr: "5%",
-          }}
-        >
-          <h2>Job Monitor</h2>
-          <JobDataTable />
-        </Box>
-      </MUIThemeProvider>
-    </Dashboard>
+    <div>
+      <h2>Job Monitor</h2>
+      <JobDataTable />
+    </div>
   );
 }

src/components/applications/UserDashboard.tsx

@@ -13,7 +13,6 @@ import { useMUITheme } from "@/hooks/theme";
  * @returns User Dashboard content
  */
 export default function UserDashboard() {
-  const theme = useMUITheme();
   const { configuration } = useOIDCContext();
   const { accessTokenPayload } = useOidcAccessToken(configuration?.scope);
 
@@ -22,20 +21,10 @@ export default function UserDashboard() {
   }
 
   return (
-    <Dashboard>
-      <MUIThemeProvider theme={theme}>
-        <CssBaseline />
-        <Box
-          sx={{
-            ml: "5%",
-            mr: "5%",
-          }}
-        >
-          <h2>Hello {accessTokenPayload["preferred_username"]}</h2>
+    <div>
+      <h2>Hello {accessTokenPayload["preferred_username"]}</h2>
 
-          <p>To start with, select an application in the side bar</p>
-        </Box>
-      </MUIThemeProvider>
-    </Dashboard>
+      <p>To start with, select an application in the side bar</p>
+    </div>
   );
 }