first commit

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

@@ -0,0 +1,117 @@
+import React, { useEffect, useState } from "react";
+import Header from "./Header";
+import useModuleStore from "../../../store/useModuleStore";
+import {
+  AnalysisIcon,
+  MechanicsIcon,
+  PropertiesIcon,
+  SimulationIcon,
+} from "../../icons/SimulationIcons";
+import useToggleStore from "../../../store/useUIToggleStore";
+import MachineMechanics from "./mechanics/MachineMechanics";
+import Visualization from "./visualization/Visualization";
+import GlobalProperties from "./properties/GlobalProperties";
+import AsstePropertiies from "./properties/AssetProperties";
+import Analysis from "./analysis/Analysis";
+import Simulations from "./simulation/Simulations";
+
+const SideBarRight: React.FC = () => {
+  const { activeModule } = useModuleStore();
+  const [activeList, setActiveList] = useState("properties");
+  const { toggleUI } = useToggleStore();
+
+  // Reset activeList whenever activeModule changes
+  useEffect(() => {
+    setActiveList("properties");
+  }, [activeModule]);
+
+  return (
+    <div className="sidebar-right-wrapper">
+      <Header />
+      {toggleUI && (
+        <div className="sidebar-actions-container">
+          <div
+            className={`sidebar-action-list ${
+              activeList === "properties" ? "active" : ""
+            }`}
+            onClick={() => setActiveList("properties")}
+          >
+            <PropertiesIcon isActive={activeList === "properties"} />
+          </div>
+          {activeModule === "simulation" && (
+            <>
+              <div
+                className={`sidebar-action-list ${
+                  activeList === "mechanics" ? "active" : ""
+                }`}
+                onClick={() => setActiveList("mechanics")}
+              >
+                <MechanicsIcon isActive={activeList === "mechanics"} />
+              </div>
+              <div
+                className={`sidebar-action-list ${
+                  activeList === "simulations" ? "active" : ""
+                }`}
+                onClick={() => setActiveList("simulations")}
+              >
+                <SimulationIcon isActive={activeList === "simulations"} />
+              </div>
+              <div
+                className={`sidebar-action-list ${
+                  activeList === "analysis" ? "active" : ""
+                }`}
+                onClick={() => setActiveList("analysis")}
+              >
+                <AnalysisIcon isActive={activeList === "analysis"} />
+              </div>
+            </>
+          )}
+        </div>
+      )}
+      {/* process builder */}
+      {toggleUI &&
+        activeList === "properties" &&
+        activeModule !== "visualization" && (
+          <div className="sidebar-right-container">
+            <div className="sidebar-right-content-container">
+              <GlobalProperties />
+              {/* <AsstePropertiies /> */}
+            </div>
+          </div>
+        )}
+
+      {/* simulation */}
+
+      {toggleUI && activeModule === "simulation" && (
+        <>
+          {activeList === "mechanics" && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <MachineMechanics />
+              </div>
+            </div>
+          )}
+          {activeList === "analysis" && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <Analysis />
+              </div>
+            </div>
+          )}
+          {activeList === "simulations" && (
+            <div className="sidebar-right-container">
+              <div className="sidebar-right-content-container">
+                <Simulations />
+              </div>
+            </div>
+          )}
+        </>
+      )}
+
+      {/* realtime visualization */}
+      {toggleUI && activeModule === "visualization" && <Visualization />}
+    </div>
+  );
+};
+
+export default SideBarRight;