Merge branch 'realTimeVisulization' of http://185.100.212.76:7776/Dwinzo-Beta/Dwinzo_dev into realTimeVisulization

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -21,11 +21,11 @@ import ZoneProperties from "./properties/ZoneProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
+  const [activeList] = useState("properties");
+  const { toggleUI } = useToggleStore();
   const { selectedActionSphere } = useSelectedActionSphere();
   const { subModule, setSubModule } = useSubModuleStore();
-  const { toggleUI } = useToggleStore();
-
-  // Reset subModule whenever activeModule changes
+  // Reset activeList whenever activeModule changes
   useEffect(() => {
     if (activeModule !== "simulation") setSubModule("properties");
     if (activeModule === "simulation") setSubModule("mechanics");
@@ -38,8 +38,9 @@ const SideBarRight: React.FC = () => {
         <div className="sidebar-actions-container">
           {/* {activeModule === "builder" && ( */}
           <div
-            className={`sidebar-action-list ${subModule === "properties" ? "active" : ""
-              }`}
+            className={`sidebar-action-list ${
+              subModule === "properties" ? "active" : ""
+            }`}
             onClick={() => setSubModule("properties")}
           >
             <PropertiesIcon isActive={subModule === "properties"} />
@@ -52,21 +53,21 @@ const SideBarRight: React.FC = () => {
                   }`}
                 onClick={() => setSubModule("mechanics")}
               >
-                <MechanicsIcon isActive={subModule === "mechanics"} />
+                <MechanicsIcon isActive={activeList === "mechanics"} />
               </div>
               <div
                 className={`sidebar-action-list ${subModule === "simulations" ? "active" : ""
                   }`}
                 onClick={() => setSubModule("simulations")}
               >
-                <SimulationIcon isActive={subModule === "simulations"} />
+                <SimulationIcon isActive={activeList === "simulations"} />
               </div>
               <div
                 className={`sidebar-action-list ${subModule === "analysis" ? "active" : ""
                   }`}
                 onClick={() => setSubModule("analysis")}
               >
-                <AnalysisIcon isActive={subModule === "analysis"} />
+                <AnalysisIcon isActive={activeList === "analysis"} />
               </div>
             </>
           )}
@@ -120,7 +121,7 @@ const SideBarRight: React.FC = () => {
               </div>
             </div>
           )}
-          {subModule === "simulations" && (
+          {activeList === "simulations" && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <Simulations />