added market placeCards

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

@@ -1,6 +1,8 @@
 import React, { useEffect, useState } from "react";
 import Header from "./Header";
-import useModuleStore from "../../../store/useModuleStore";
+import useModuleStore, {
+  useSubModuleStore,
+} from "../../../store/useModuleStore";
 import {
   AnalysisIcon,
   MechanicsIcon,
@@ -14,15 +16,19 @@ import GlobalProperties from "./properties/GlobalProperties";
 import AsstePropertiies from "./properties/AssetProperties";
 import Analysis from "./analysis/Analysis";
 import Simulations from "./simulation/Simulations";
+import { useSelectedActionSphere } from "../../../store/store";
+import ZoneProperties from "./properties/ZoneProperties";
 
 const SideBarRight: React.FC = () => {
   const { activeModule } = useModuleStore();
-  const [activeList, setActiveList] = useState("properties");
+  const [activeList] = useState("properties");
   const { toggleUI } = useToggleStore();
-
+  const { selectedActionSphere } = useSelectedActionSphere();
+  const { subModule, setSubModule } = useSubModuleStore();
   // Reset activeList whenever activeModule changes
   useEffect(() => {
-    setActiveList("properties");
+    if (activeModule !== "simulation") setSubModule("properties");
+    if (activeModule === "simulation") setSubModule("mechanics");
   }, [activeModule]);
 
   return (
@@ -30,37 +36,39 @@ const SideBarRight: React.FC = () => {
       <Header />
       {toggleUI && (
         <div className="sidebar-actions-container">
+          {/* {activeModule === "builder" && ( */}
           <div
             className={`sidebar-action-list ${
-              activeList === "properties" ? "active" : ""
+              subModule === "properties" ? "active" : ""
             }`}
-            onClick={() => setActiveList("properties")}
+            onClick={() => setSubModule("properties")}
           >
-            <PropertiesIcon isActive={activeList === "properties"} />
+            <PropertiesIcon isActive={subModule === "properties"} />
           </div>
+          {/* )} */}
           {activeModule === "simulation" && (
             <>
               <div
                 className={`sidebar-action-list ${
-                  activeList === "mechanics" ? "active" : ""
+                  subModule === "mechanics" ? "active" : ""
                 }`}
-                onClick={() => setActiveList("mechanics")}
+                onClick={() => setSubModule("mechanics")}
               >
                 <MechanicsIcon isActive={activeList === "mechanics"} />
               </div>
               <div
                 className={`sidebar-action-list ${
-                  activeList === "simulations" ? "active" : ""
+                  subModule === "simulations" ? "active" : ""
                 }`}
-                onClick={() => setActiveList("simulations")}
+                onClick={() => setSubModule("simulations")}
               >
                 <SimulationIcon isActive={activeList === "simulations"} />
               </div>
               <div
                 className={`sidebar-action-list ${
-                  activeList === "analysis" ? "active" : ""
+                  subModule === "analysis" ? "active" : ""
                 }`}
-                onClick={() => setActiveList("analysis")}
+                onClick={() => setSubModule("analysis")}
               >
                 <AnalysisIcon isActive={activeList === "analysis"} />
               </div>
@@ -75,6 +83,7 @@ const SideBarRight: React.FC = () => {
           <div className="sidebar-right-container">
             <div className="sidebar-right-content-container">
               <GlobalProperties />
+              {/* <ZoneProperties /> */}
               {/* <AsstePropertiies /> */}
             </div>
           </div>
@@ -84,14 +93,21 @@ const SideBarRight: React.FC = () => {
 
       {toggleUI && activeModule === "simulation" && (
         <>
-          {activeList === "mechanics" && (
+          {subModule === "mechanics" && selectedActionSphere && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <MachineMechanics />
               </div>
             </div>
           )}
-          {activeList === "analysis" && (
+          {subModule === "mechanics" && !selectedActionSphere && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <MachineMechanics />
+              </div>
+            </div>
+          )}
+          {subModule === "analysis" && (
             <div className="sidebar-right-container">
               <div className="sidebar-right-content-container">
                 <Analysis />