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 (
{toggleUI && (
setActiveList("properties")} >
{activeModule === "simulation" && ( <>
setActiveList("mechanics")} >
setActiveList("simulations")} >
setActiveList("analysis")} >
)}
)} {/* process builder */} {toggleUI && activeList === "properties" && activeModule !== "visualization" && (
{/* */}
)} {/* simulation */} {toggleUI && activeModule === "simulation" && ( <> {activeList === "mechanics" && (
)} {activeList === "analysis" && (
)} {activeList === "simulations" && (
)} )} {/* realtime visualization */} {toggleUI && activeModule === "visualization" && }
); }; export default SideBarRight;