first commit

app/src/components/layout/sidebarLeft/SideBarLeft.tsx

@@ -0,0 +1,70 @@
+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 "./visualization/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" ? (
+            <></>
+          ) : (
+            <>
+              <ToggleHeader
+                options={["Outline", "Assets"]}
+                activeOption={activeOption}
+                handleClick={handleToggleClick}
+              />
+              <div className="sidebar-left-content-container">
+                {activeOption === "Outline" ? <Outline /> : <Assets />}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default SideBarLeft;