105 lines
3.6 KiB
TypeScript
105 lines
3.6 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import ToggleHeader from "../../ui/inputs/ToggleHeader";
|
|
import Outline from "./Outline";
|
|
import Header from "./Header";
|
|
import { useToggleStore } from "../../../store/useUIToggleStore";
|
|
import Assets from "./Assets";
|
|
import useModuleStore from "../../../store/useModuleStore";
|
|
import Widgets from "./visualization/widgets/Widgets";
|
|
import Templates from "../../../modules/visualization/template/Templates";
|
|
import Search from "../../ui/inputs/Search";
|
|
import { useSaveVersion } from "../../../store/builder/store";
|
|
|
|
const SideBarLeft: React.FC = () => {
|
|
const [activeOption, setActiveOption] = useState("Widgets");
|
|
|
|
const { toggleUILeft } = useToggleStore();
|
|
const { activeModule } = useModuleStore();
|
|
|
|
const { isVersionSaved } = useSaveVersion();
|
|
|
|
// Reset activeOption whenever activeModule changes
|
|
useEffect(() => {
|
|
setActiveOption("Outline");
|
|
if (activeModule === "visualization") setActiveOption("Widgets");
|
|
}, [activeModule]);
|
|
|
|
const handleToggleClick = (option: string) => {
|
|
setActiveOption(option); // Update the active option
|
|
};
|
|
|
|
const handleSearchChange = (value: string) => {
|
|
// Log the search value for now
|
|
console.log(value);
|
|
};
|
|
|
|
console.log('isVersionSaved: ', isVersionSaved);
|
|
console.log('toggleUILeft: ', toggleUILeft);
|
|
|
|
return (
|
|
<div
|
|
className={`sidebar-left-wrapper ${toggleUILeft && (!isVersionSaved || activeModule !== "simulation") ? "open" : "closed"
|
|
}`}
|
|
>
|
|
<Header />
|
|
{toggleUILeft && (
|
|
<div className={`sidebar-left-container `}>
|
|
{(() => {
|
|
if (activeModule === "visualization") {
|
|
return (
|
|
<>
|
|
<ToggleHeader
|
|
options={["Widgets", "Templates"]}
|
|
activeOption={activeOption}
|
|
handleClick={handleToggleClick}
|
|
/>
|
|
<Search onChange={handleSearchChange} />
|
|
<div className="sidebar-left-content-container">
|
|
{activeOption === "Widgets" ? <Widgets /> : <Templates />}
|
|
</div>
|
|
</>
|
|
);
|
|
} else if (activeModule === "market") {
|
|
return <></>;
|
|
} else if (activeModule === "builder") {
|
|
return (
|
|
<>
|
|
<ToggleHeader
|
|
options={["Outline", "Assets"]}
|
|
activeOption={activeOption}
|
|
handleClick={handleToggleClick}
|
|
/>
|
|
<div className="sidebar-left-content-container">
|
|
{activeOption === "Outline" ? <Outline /> : <Assets />}
|
|
</div>
|
|
</>
|
|
);
|
|
} else {
|
|
return (
|
|
<>
|
|
{!isVersionSaved && (
|
|
<>
|
|
<ToggleHeader
|
|
options={["Outline"]}
|
|
activeOption={activeOption}
|
|
handleClick={handleToggleClick}
|
|
/>
|
|
<div className="sidebar-left-content-container">
|
|
{activeOption === "Outline" ? <Outline /> : <Assets />}
|
|
</div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
})()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SideBarLeft;
|
|
|
|
// sidebar-left-container opemn close sidebar-left-container smoothly
|