82 lines
2.7 KiB
TypeScript
82 lines
2.7 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";
|
|
|
|
const SideBarLeft: React.FC = () => {
|
|
const [activeOption, setActiveOption] = useState("Widgets");
|
|
|
|
const { toggleUI } = useToggleStore();
|
|
const { activeModule } = useModuleStore();
|
|
|
|
// 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">
|
|
<Header />
|
|
{toggleUI && (
|
|
<div className="sidebar-left-container">
|
|
{activeModule === "visualization" ? (
|
|
<>
|
|
<ToggleHeader
|
|
options={["Widgets", "Templates"]}
|
|
activeOption={activeOption}
|
|
handleClick={handleToggleClick}
|
|
/>
|
|
<Search onChange={handleSearchChange} />
|
|
<div className="sidebar-left-content-container">
|
|
{activeOption === "Widgets" ? <Widgets /> : <Templates />}
|
|
</div>
|
|
</>
|
|
) : activeModule === "market" ? (
|
|
<></>
|
|
) : activeModule === "builder" ? (
|
|
<>
|
|
<ToggleHeader
|
|
options={["Outline", "Assets"]}
|
|
activeOption={activeOption}
|
|
handleClick={handleToggleClick}
|
|
/>
|
|
<div className="sidebar-left-content-container">
|
|
{activeOption === "Outline" ? <Outline /> : <Assets />}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<ToggleHeader
|
|
options={["Outline"]}
|
|
activeOption={activeOption}
|
|
handleClick={handleToggleClick}
|
|
/>
|
|
<div className="sidebar-left-content-container">
|
|
{activeOption === "Outline" ? <Outline /> : <Assets />}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SideBarLeft;
|