Save point, page is rendering with view tracking

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

@@ -7,9 +7,10 @@ import { FaGlobeAmericas } from "react-icons/fa";
 import { FaMapMarkerAlt } from "react-icons/fa";
 import { HiUsers } from "react-icons/hi2";
 import { VscThreeBars } from "react-icons/vsc";
-import { useState } from "react";
+import { useState, useEffect } from "react";
+import { Seismic } from "../Canvas/views/DashboardCanvasNav/Seismic";
 
-export default function Sidebar({ onChangeView }) {
+export default function Sidebar({ view, onChangeView }) {
   const [isOpen, setIsOpen] = useState(true);
   const [activeButton, setActiveButton] = useState(0)
 
@@ -30,6 +31,25 @@ export default function Sidebar({ onChangeView }) {
     else setIsOpen(true);
   };
 
+  // Track currrent view from both Sidebar and Canvas when 'view' changes
+  useEffect(() => {
+    console.log("Current view = ", view);
+    const dashboardViews = ["widget", "gas", "seismic", "remote", "activity"];
+
+    const newIndex = buttons.findIndex((btn) => {
+      if (btn.view === "widget") {
+        return dashboardViews.includes(view); // Group match
+      }
+      return btn.view === view; // Exact match
+    });
+
+    if (newIndex !== -1 ) {
+      setActiveButton(newIndex);
+    }
+  }, [view]);
+  
+  
+
   return (
     <Box
       css={styles.root}
@@ -53,7 +73,7 @@ export default function Sidebar({ onChangeView }) {
                   // key={idx} 
                   css={styles.buttons} 
                   onClick={() => {
-                    setActiveButton(idx);
+                    // setActiveButton(idx);
                     onChangeView(button.view); // Trigger state change in Dashboard
                   }} 
                   bg={activeButton === idx ? "primary":undefined}