code refactored

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

@@ -23,7 +23,6 @@ const Outline: React.FC = () => {
     // const [buildingsList, setBuildingsList] = useState<{ id: string; name: string }[]>([]);
     // const [isLayersOpen, setIsLayersOpen] = useState(true);
     // const [isBuildingsOpen, setIsBuildingsOpen] = useState(false);
-    const [isZonesOpen, setIsZonesOpen] = useState(true);
     const { assetStore, zoneStore } = useSceneContext();
     const { assets } = assetStore();
     const { zones } = zoneStore();
@@ -100,7 +99,7 @@ const Outline: React.FC = () => {
                     </section> */}
                     <section className="outline-section overflow">
                         {/* <DropDownList value="Buildings" items={buildingsList} isOpen={isBuildingsOpen} onToggle={() => setIsBuildingsOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} /> */}
-                        <DropDownList value="Zones" items={sceneAssetsDataList} isOpen={isZonesOpen} onToggle={() => setIsZonesOpen((prev) => !prev)} showKebabMenu={false} showAddIcon={false} />
+                        <DropDownList header="Zones" type="Zones" items={sceneAssetsDataList} isDefaultOpen={true} showKebabMenu={false} showAddIcon={false} />
                     </section>
                 </div>
             )}

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

@@ -34,10 +34,7 @@ const SideBarLeft: React.FC = () => {
     };
 
     return (
-    <div
+        <div className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"}`}>
-      className={`sidebar-left-wrapper ${toggleUILeft && (!isComparing || activeModule !== "simulation") ? "open" : "closed"
-        }`}
-    >
             <Header />
             {toggleUILeft && (
                 <div className={`sidebar-left-container `}>
@@ -45,15 +42,9 @@ const SideBarLeft: React.FC = () => {
                         if (activeModule === "visualization") {
                             return (
                                 <>
-                  <ToggleHeader
+                                    <ToggleHeader options={["Widgets", "Templates"]} activeOption={activeOption} handleClick={handleToggleClick} />
-                    options={["Widgets", "Templates"]}
-                    activeOption={activeOption}
-                    handleClick={handleToggleClick}
-                  />
                                     <Search onChange={handleSearchChange} />
-                  <div className="sidebar-left-content-container">
+                                    <div className="sidebar-left-content-container">{activeOption === "Widgets" ? <Widgets /> : <Templates />}</div>
-                    {activeOption === "Widgets" ? <Widgets /> : <Templates />}
-                  </div>
                                 </>
                             );
                         } else if (activeModule === "market") {
@@ -61,14 +52,8 @@ const SideBarLeft: React.FC = () => {
                         } else if (activeModule === "builder") {
                             return (
                                 <>
-                  <ToggleHeader
+                                    <ToggleHeader options={["Outline", "Assets"]} activeOption={activeOption} handleClick={handleToggleClick} />
-                    options={["Outline", "Assets"]}
+                                    <div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
-                    activeOption={activeOption}
-                    handleClick={handleToggleClick}
-                  />
-                  <div className="sidebar-left-content-container">
-                    {activeOption === "Outline" ? <Outline /> : <Assets />}
-                  </div>
                                 </>
                             );
                         } else {
@@ -76,14 +61,8 @@ const SideBarLeft: React.FC = () => {
                                 <>
                                     {!isComparing && (
                                         <>
-                      <ToggleHeader
+                                            <ToggleHeader options={["Outline"]} activeOption={activeOption} handleClick={handleToggleClick} />
-                        options={["Outline"]}
+                                            <div className="sidebar-left-content-container">{activeOption === "Outline" ? <Outline /> : <Assets />}</div>
-                        activeOption={activeOption}
-                        handleClick={handleToggleClick}
-                      />
-                      <div className="sidebar-left-content-container">
-                        {activeOption === "Outline" ? <Outline /> : <Assets />}
-                      </div>
                                         </>
                                     )}
                                 </>

app/src/components/ui/list/DropDownList.tsx

@@ -4,61 +4,69 @@ import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect";
 import List from "./OutlineList/ListNew";
 
 interface DropDownListProps {
-    value?: string;
+    header?: string;
+    type?: "Zones" | "Assets";
     items?: { id: string; name: string }[];
     showFocusIcon?: boolean;
+    onFocusClick?: () => void;
     showAddIcon?: boolean;
+    onAddClick?: () => void;
     showKebabMenu?: boolean;
+    onKebabMenuSelect?: (selectedItems: string[]) => void;
     kebabMenuItems?: { id: string; name: string }[];
-    remove?: boolean;
+    removeIcon?: boolean;
-    isOpen: boolean;
+    isDefaultOpen: boolean;
-    onToggle: () => void;
 }
 
 const DropDownList: React.FC<DropDownListProps> = ({
-    value = "Dropdown",
+    header = "Dropdown",
     items = [],
+    type = "Assets",
     showFocusIcon = false,
+    onFocusClick,
     showAddIcon = true,
+    onAddClick,
     showKebabMenu = true,
+    onKebabMenuSelect,
+    removeIcon = false,
     kebabMenuItems = [
         { id: "Buildings", name: "Buildings" },
         { id: "Paths", name: "Paths" },
         { id: "Zones", name: "Zones" },
     ],
-    remove,
+    isDefaultOpen,
-    isOpen,
-    onToggle,
 }) => {
+    const [isOpen, setIsOpen] = React.useState(isDefaultOpen);
+
     return (
         <div className="dropdown-list-container">
-            <div className="head" onClick={onToggle}>
+            <div className="head" onClick={() => setIsOpen((prev) => !prev)}>
-                <div className="value">{value}</div>
+                <div className="value">{header}</div>
                 <div className="options">
                     {showFocusIcon && (
-                        <div className="focus option">
+                        <div className="focus option" onClick={onFocusClick}>
                             <FocusIcon />
                         </div>
                     )}
                     {showAddIcon && (
-                        <div className="add option">
+                        <div className="add option" onClick={onAddClick}>
                             <AddIcon />
                         </div>
                     )}
                     {showKebabMenu && (
                         <div className="kebab-menu option">
-                            <KebabMenuListMultiSelect items={kebabMenuItems} />
+                            <KebabMenuListMultiSelect items={kebabMenuItems} onSelectionChange={onKebabMenuSelect} />
                         </div>
                     )}
-                    <button id="collapse-btn" title="collapse-btn" className="collapse-icon option" style={{ transform: isOpen ? "rotate(0deg)" : "rotate(-90deg)" }}>
+                    <button id="collapse-btn" title="collapse-btn" className="collapse-icon option" style={{ transform: isDefaultOpen ? "rotate(0deg)" : "rotate(-90deg)" }}>
                         <ArrowIcon />
                     </button>
                 </div>
             </div>
 
-            {isOpen && (
+            {isDefaultOpen && isOpen && (
                 <div className="lists-container">
-                    <List items={items} remove={remove} />
+                    <List items={items} remove={removeIcon} />
                 </div>
             )}
         </div>