Refactor sidebar toggle functionality to support independent left and right UI states; update related components and styles for improved usability

This commit is contained in:
2025-05-13 10:32:24 +05:30
parent b1569e64ed
commit 4337bb9056
10 changed files with 300 additions and 197 deletions

View File

@@ -25,7 +25,7 @@ import EventProperties from "./properties/eventProperties/EventProperties";
const SideBarRight: React.FC = () => {
const { activeModule } = useModuleStore();
const { toggleUI } = useToggleStore();
const { toggleUIRight } = useToggleStore();
const { subModule, setSubModule } = useSubModuleStore();
const { selectedFloorItem } = useSelectedFloorItem();
const { selectedEventData } = useSelectedEventData();
@@ -55,9 +55,9 @@ const SideBarRight: React.FC = () => {
}, [activeModule, selectedEventData, selectedEventSphere, setSubModule]);
return (
<div className={`sidebar-right-wrapper ${toggleUI ? "open" : "closed"}`}>
<div className={`sidebar-right-wrapper ${toggleUIRight ? "open" : "closed"}`}>
<Header />
{toggleUI && (
{toggleUIRight && (
<div className="sidebar-actions-container">
{activeModule !== "simulation" && (
<button
@@ -104,7 +104,7 @@ const SideBarRight: React.FC = () => {
</div>
)}
{/* process builder */}
{toggleUI &&
{toggleUIRight &&
subModule === "properties" &&
activeModule !== "visualization" &&
!selectedFloorItem && (
@@ -114,7 +114,7 @@ const SideBarRight: React.FC = () => {
</div>
</div>
)}
{toggleUI &&
{toggleUIRight &&
subModule === "properties" &&
activeModule !== "visualization" &&
selectedFloorItem && (
@@ -124,7 +124,7 @@ const SideBarRight: React.FC = () => {
</div>
</div>
)}
{toggleUI &&
{toggleUIRight &&
subModule === "zoneProperties" &&
(activeModule === "builder" || activeModule === "simulation") && (
<div className="sidebar-right-container">
@@ -134,7 +134,7 @@ const SideBarRight: React.FC = () => {
</div>
)}
{/* simulation */}
{toggleUI && activeModule === "simulation" && (
{toggleUIRight && activeModule === "simulation" && (
<>
{subModule === "simulations" && (
<div className="sidebar-right-container">
@@ -160,7 +160,7 @@ const SideBarRight: React.FC = () => {
</>
)}
{/* realtime visualization */}
{toggleUI && activeModule === "visualization" && <Visualization />}
{toggleUIRight && activeModule === "visualization" && <Visualization />}
</div>
);
};