Merge pull request #2986 from bluewave-labs/feat/v2/root/layout

feat/v2/root/layout

.gitignore

@@ -1,2 +1,3 @@
+.idea
 .vscode
 .VSCodeCounter

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 "@mui/material/styles";
+
+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 = () => {
+	return (
+		<Stack
+			direction="row"
+			minHeight="100vh"
+		>
+			<SideBar />
+			<Outlet />
+		</Stack>
+	);
+};
+
+export default RootLayout;

client/src/Routes/v2router.tsx

@@ -2,10 +2,9 @@ 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 other v2 pages here...
+import RootLayout from "@/Components/v2/Layouts/RootLayout";
 
 const V2Routes = ({ mode = "light" }) => {
 	const v2Theme = mode === "light" ? lightTheme : darkTheme;
@@ -21,6 +20,15 @@ const V2Routes = ({ mode = "light" }) => {
 					path="register"
 					element={<AuthRegisterV2 />}
 				/>
+				<Route
+					path="/"
+					element={<RootLayout mode={mode} />}
+				>
+					<Route
+						path="test"
+						element={<h1>Test Page</h1>}
+					/>
+				</Route>
 			</Routes>
 		</ThemeProvider>
 	);