From 1d5f2427ed692658b9d86111eec95334fc087fbf Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Fri, 26 Sep 2025 16:01:05 -0700
Subject: [PATCH 1/3] add root layout

---
 .../src/Components/v2/Layouts/RootLayout.tsx  | 50 +++++++++++++++++++
 client/src/Routes/index.jsx                   | 27 +++-------
 client/src/Routes/v2router.tsx                | 39 +++++++++++++++
 3 files changed, 96 insertions(+), 20 deletions(-)
 create mode 100644 client/src/Components/v2/Layouts/RootLayout.tsx
 create mode 100644 client/src/Routes/v2router.tsx

diff --git a/client/src/Components/v2/Layouts/RootLayout.tsx b/client/src/Components/v2/Layouts/RootLayout.tsx
new file mode 100644
index 000000000..5f78600f4
--- /dev/null
+++ b/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;
diff --git a/client/src/Routes/index.jsx b/client/src/Routes/index.jsx
index 39959bc1c..2e4fd9c50 100644
--- a/client/src/Routes/index.jsx
+++ b/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
diff --git a/client/src/Routes/v2router.tsx b/client/src/Routes/v2router.tsx
new file mode 100644
index 000000000..ef9009cb1
--- /dev/null
+++ b/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;

From 4d254b004dd8440ec08bbfc01f04ffcbd229e190 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 27 Sep 2025 14:38:14 -0700
Subject: [PATCH 2/3] add gitignore

---
 .gitignore                                      | 1 +
 client/src/Components/v2/Layouts/RootLayout.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 172702b40..997dff9c5 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
+.idea
 .vscode
 .VSCodeCounter
\ No newline at end of file
diff --git a/client/src/Components/v2/Layouts/RootLayout.tsx b/client/src/Components/v2/Layouts/RootLayout.tsx
index 5f78600f4..4082242ef 100644
--- a/client/src/Components/v2/Layouts/RootLayout.tsx
+++ b/client/src/Components/v2/Layouts/RootLayout.tsx
@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import useMediaQuery from "@mui/material/useMediaQuery";
-import { useTheme } from "@emotion/react";
+import { useTheme } from "@mui/material/styles";
 
 import { Outlet } from "react-router";
 import Stack from "@mui/material/Stack";

From 09fbc6b0b267406ffa6cf256cc2a09fdbe6b4294 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 27 Sep 2025 14:48:05 -0700
Subject: [PATCH 3/3] remove unused mode

---
 client/src/Components/v2/Layouts/RootLayout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/client/src/Components/v2/Layouts/RootLayout.tsx b/client/src/Components/v2/Layouts/RootLayout.tsx
index 4082242ef..be2f42e30 100644
--- a/client/src/Components/v2/Layouts/RootLayout.tsx
+++ b/client/src/Components/v2/Layouts/RootLayout.tsx
@@ -35,7 +35,7 @@ const SideBar = () => {
 	);
 };
 
-const RootLayout = ({ mode = "light" }) => {
+const RootLayout = () => {
 	return (
 		<Stack
 			direction="row"