81 lines
3.7 KiB
TypeScript
81 lines
3.7 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import ToggleHeader from "../../ui/inputs/ToggleHeader";
|
|
import Header from "./Header";
|
|
import { useToggleStore } from "../../../store/ui/useUIToggleStore";
|
|
import Assets from "./assetList/Assets";
|
|
import useModuleStore from "../../../store/ui/useModuleStore";
|
|
import Widgets from "./visualization/widgets/Widgets";
|
|
import Templates from "../../../modules/visualization/template/Templates";
|
|
import Search from "../../ui/inputs/Search";
|
|
import { useIsComparing } from "../../../store/builder/store";
|
|
import { AssetOutline } from "../../ui/list/OutlineList/AssetOutline";
|
|
|
|
const SideBarLeft: React.FC = () => {
|
|
const [activeOption, setActiveOption] = useState("Widgets");
|
|
|
|
const { toggleUILeft } = useToggleStore();
|
|
const { activeModule } = useModuleStore();
|
|
|
|
const { isComparing } = useIsComparing();
|
|
|
|
// 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);
|
|
};
|
|
|
|
return (
|
|
<div className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || 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" ? <AssetOutline /> : <Assets />}</div>
|
|
</>
|
|
);
|
|
} else {
|
|
return (
|
|
<>
|
|
{!isComparing && (
|
|
<>
|
|
<ToggleHeader options={["Outline"]} activeOption={activeOption} handleClick={handleToggleClick} />
|
|
<div className="sidebar-left-content-container">{activeOption === "Outline" ? <AssetOutline /> : <Assets />}</div>
|
|
</>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
})()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SideBarLeft;
|
|
|
|
// sidebar-left-container open close sidebar-left-container smoothly
|