add root layout

client/src/Components/v2/Layouts/RootLayout.tsx

@@ -0,0 +1,50 @@
+import { useState, useEffect } from "react";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { useTheme } from "@emotion/react";
+
+import { Outlet } from "react-router";
+import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
+
+const COLLAPSED_WIDTH = 50;
+const EXPANDED_WIDTH = 250;
+
+const SideBar = () => {
+	const theme = useTheme();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
+
+	const [collapsed, setCollapsed] = useState(false);
+	useEffect(() => {
+		setCollapsed(isSmall);
+	}, [isSmall]);
+	return (
+		<Stack
+			border="1px solid red"
+			width={collapsed ? COLLAPSED_WIDTH : EXPANDED_WIDTH}
+			sx={{
+				transition: "width 0.3s ease",
+			}}
+		>
+			<Box
+				border="1px solid blue"
+				onClick={() => setCollapsed(!collapsed)}
+			>
+				Sidebar Content
+			</Box>
+		</Stack>
+	);
+};
+
+const RootLayout = ({ mode = "light" }) => {
+	return (
+		<Stack
+			direction="row"
+			minHeight="100vh"
+		>
+			<SideBar />
+			<Outlet />
+		</Stack>
+	);
+};
+
+export default RootLayout;

client/src/Routes/index.jsx

@@ -1,14 +1,11 @@
 import { useSelector } from "react-redux";
 import { lightTheme, darkTheme } from "@/Utils/Theme/v2/theme";
 import { Navigate, Route, Routes as LibRoutes } from "react-router";
-import { ThemeProvider } from "@emotion/react";
 import HomeLayout from "../Components/Layouts/HomeLayout";
 import NotFound from "../Pages/v1/NotFound";
 // Auth
 import AuthLogin from "../Pages/v1/Auth/Login";
-import AuthLoginV2 from "@/Pages/v2/Auth/Login";
 import AuthRegister from "../Pages/v1/Auth/Register/";
-import AuthRegisterV2 from "@/Pages/v2/Auth/Register";
 import AuthForgotPassword from "../Pages/v1/Auth/ForgotPassword";
 import AuthCheckEmail from "../Pages/v1/Auth/CheckEmail";
 import AuthSetNewPassword from "../Pages/v1/Auth/SetNewPassword";
@@ -57,12 +54,18 @@ import withAdminCheck from "../Components/HOC/withAdminCheck";
 import BulkImport from "../Pages/v1/Uptime/BulkImport";
 import Logs from "../Pages/v1/Logs";
 
+import V2Routes from "@/Routes/v2router";
+
 const Routes = () => {
 	const mode = useSelector((state) => state.ui.mode);
-	const v2Theme = mode === "light" ? lightTheme : darkTheme;
 	const AdminCheckedRegister = withAdminCheck(AuthRegister);
 	return (
 		<LibRoutes>
+			<Route
+				path="/v2/*"
+				element={<V2Routes mode={mode} />}
+			/>
+
 			<Route
 				path="/"
 				element={
@@ -220,27 +223,11 @@ const Routes = () => {
 				path="/login"
 				element={<AuthLogin />}
 			/>
-			<Route
-				path="/v2/login"
-				element={
-					<ThemeProvider theme={v2Theme}>
-						<AuthLoginV2 />
-					</ThemeProvider>
-				}
-			/>
 
 			<Route
 				path="/register"
 				element={<AdminCheckedRegister />}
 			/>
-			<Route
-				path="/v2/register"
-				element={
-					<ThemeProvider theme={v2Theme}>
-						<AuthRegisterV2 />
-					</ThemeProvider>
-				}
-			/>
 
 			<Route
 				exact

client/src/Routes/v2router.tsx

@@ -0,0 +1,39 @@
+import { Routes, Route } from "react-router";
+import { ThemeProvider } from "@emotion/react";
+import { lightTheme, darkTheme } from "@/Utils/Theme/v2/theme";
+
+// v2 pages
+import AuthLoginV2 from "@/Pages/v2/Auth/Login";
+import AuthRegisterV2 from "@/Pages/v2/Auth/Register";
+import RootLayout from "@/Components/v2/Layouts/RootLayout";
+// import other v2 pages here...
+
+const V2Routes = ({ mode = "light" }) => {
+	const v2Theme = mode === "light" ? lightTheme : darkTheme;
+
+	return (
+		<ThemeProvider theme={v2Theme}>
+			<Routes>
+				<Route
+					path="login"
+					element={<AuthLoginV2 />}
+				/>
+				<Route
+					path="register"
+					element={<AuthRegisterV2 />}
+				/>
+				<Route
+					path="/"
+					element={<RootLayout mode={mode} />}
+				>
+					<Route
+						path="test"
+						element={<h1>Test Page</h1>}
+					/>
+				</Route>
+			</Routes>
+		</ThemeProvider>
+	);
+};
+
+export default V2Routes;