some routes added

client/src/App.jsx

@@ -1,10 +1,59 @@
-import Dashboard from './components/Dashboard.jsx'
 import 'leaflet/dist/leaflet.css';
+import { Routes, Route } from 'react-router-dom';
+import { useRecipe, Grid, GridItem, useDialog } from "@chakra-ui/react";
+import { createContext } from "react";
+import Login from "@/Login.jsx";
+import Sidebar from "./components/Sidebar/Sidebar.jsx";
+import DialogPopup from "@/components/Canvas/CanvasComponents/DialogPopup.jsx";
+import Header from "@/components/Header/Header.jsx";
+import Home from "./components/Canvas/views/Home.jsx";
+import RegionalMap from "./components/Canvas/views/RegionalMap.jsx";
+import Volcano from "@/components/Canvas/views/Volcano.jsx";
 
+function AppFoundation({children}) {
+  const recipe = useRecipe({ key: "dashboard" });
+  const styles = recipe();
+  const dialog = useDialog();
+
+  return (
+    <>
+      <DialogPopup dialog={dialog} />
+      <Grid css={styles}
+        templateRows="1fr 11fr"
+        templateColumns="auto 1fr"
+        height="100vh"
+        width="100vw"
+      >
+        <GridItem rowSpan={1} colSpan={2}>
+          <Header />
+        </GridItem>
+        <GridItem colSpan={1}>
+          <Sidebar />
+        </GridItem>
+        <GridItem colSpan={1} width="100%" overflow="auto">
+          {children}
+        </GridItem>
+      </Grid>
+    </>
+  )
+}
+
+// function ProtectedRoute({ user, children }) {
+//   if (user) return children;
+//   else return <Navigate to="/login" replace />;
+// }
 
 function App() {
+  const sidebarContext = createContext(["Home", "Global Map", "Regional Map", "Volcano", "Admin"]);
+  // const [user, setUser] = useState(null);
+
   return (
-    <Dashboard />
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route path="/home" element={<AppFoundation> <Home/> </AppFoundation>} />
+        <Route path="/regional-map" element={<AppFoundation> <RegionalMap/> </AppFoundation>} />
+        <Route path="/volcano" element={<AppFoundation> <Volcano/> </AppFoundation>} />
+      </Routes>
   );
 }