Add functional links between Sidebar nav buttons and Canvas views

client/src/components/layout/Canvas/Canvas.jsx

@@ -1,22 +1,24 @@
 // This Canvas component will be used to dynamically populate 
 // the main canvas section of the web App with a default state
 // of 'WidgetCanvas' 
-import { useState } from "react";
+
 import { Box } from "@chakra-ui/react";
 import CanvasHeader from "./CanvasHeader";
 import WidgetCanvas from "./views/WidgetCanvas";
-// import MapCanvas from "./views/MapCanvas";
+import GlobalMapCanvas from "./views/GlobalMapCanvas";
-// import AdminCanvas from "./views/AdminCanvas";
+import RegionalMapCanvas from "./views/RegionalMapCanvas";
+import VolcanoCanvas from "./views/VolcanoCanvas";
+import AdminCanvas from "./views/AdminCanvas";
 
 export default function Canvas({ view }) {
-    // const [view, setView] = useState("widget");
-
     return (
         <Box height="100%" width="100%">
             <CanvasHeader />
             {view === "widget" && <WidgetCanvas />}
-            {/* {view === "map" && <MapCanvas />} */}
+            {view === "global" && <GlobalMapCanvas />}
-            {/* {view === "admin" && <AdminCanvas />} */}
+            {view === "regional" && <RegionalMapCanvas />}
+            {view === "volcano" && <VolcanoCanvas />}
+            {view === "admin" && <AdminCanvas />}
         </Box>
     );
 }

client/src/components/layout/Canvas/views/AdminCanvas.jsx

@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function AdminCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Admin Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}

client/src/components/layout/Canvas/views/GlobalMapCanvas.jsx

@@ -0,0 +1,24 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function GlobalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Global Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}

client/src/components/layout/Canvas/views/RegionalMapCanvas.jsx

@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function RegionalMapCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Regional Map Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}

client/src/components/layout/Canvas/views/VolcanoCanvas.jsx

@@ -0,0 +1,26 @@
+import { Box, Text } from '@chakra-ui/react';
+
+export default function VolcanoCanvas() {
+    return (
+        <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+            <Box 
+                bg="bg" 
+                shadow="md" 
+                borderRadius="md"
+                p={8}
+                width="600px"
+                height="100px"
+                textAlign="center"
+                display="flex"
+                alignItems="center"
+                justifyContent="center"
+
+            
+            >
+                <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+                    Volcano Canvas coming soon!
+                </Text>
+            </Box>
+        </Box>
+    );
+}