Add view and setView props in order to successfully pass state from Sidebar to the Canvas inside Dashboard

client/src/components/layout/Sidebar/Sidebar.jsx

@@ -57,18 +57,18 @@ export const Users = createIcon({
   ),
 });
 
-export default function Sidebar() {
+export default function Sidebar({ onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
+  const [activeButton, setActiveButton] = useState(0)
 
   const buttons = [
-    {icon: PushPin, name: "Dashboard"},
-    {icon: Globe, name: "Global Map"},
-    {icon: MapMarker, name: "Regional Map"},
-    {icon: FaVolcano, name: "Volcano"},
-    {icon: Users, name: "Admin"}
+    {icon: PushPin, name: "Dashboard", view: "widget"},
+    {icon: Globe, name: "Global Map", view: "global"},
+    {icon: MapMarker, name: "Regional Map", view: "regional"},
+    {icon: FaVolcano, name: "Volcano", view: "volcano"},
+    {icon: Users, name: "Admin", view: "admin"}
   ];
   
-  const [activeButton, setActiveButton] = useState(0)
   const recipe = useSlotRecipe({ key: "sidebar" });
   const styles = recipe();
 
@@ -98,7 +98,10 @@ export default function Sidebar() {
         return (
           <Button key={idx} 
                   css={styles.buttons} 
-                  onClick={() => setActiveButton(idx)} 
+                  onClick={() => {
+                    setActiveButton(idx);
+                    onChangeView(button.view); // Trigger state change in Dashboard
+                  }} 
                   bg={activeButton === idx ? "primary":undefined} 
                   justifyContent="flex-start"
           >