git templates updated

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

@@ -1,8 +1,24 @@
-import React from 'react';
+import React, { useState } from "react";
+import Search from "../../ui/inputs/Search";
 
 const Assets: React.FC = () => {
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+    console.log(value); // Log the search value if needed
+  };
   return (
-    <div>Assets</div>
+    <div className="assets-container">
+      <Search onChange={handleSearchChange} />
+      {searchValue ? (
+        <div className="searched-content">
+          <p>Results for "{searchValue}"</p>
+        </div>
+      ) : (
+        <></>
+      )}
+    </div>
   );
 };
 

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

@@ -1,9 +1,29 @@
-import React from 'react';
+import React from "react";
+import { ToggleSidebarIcon } from "../../icons/HeaderIcons";
+import { LogoIcon } from "../../icons/Logo";
+import FileMenu from "../../ui/FileMenu";
+import useToggleStore from "../../../store/useUIToggleStore";
 
 const Header: React.FC = () => {
+  const { toggleUI, setToggleUI } = useToggleStore();
   return (
     <div className="header-container">
-        
+      <div className="header-content">
+        <div className="logo-container">
+          <LogoIcon />
+        </div>
+        <div className="header-title">
+          <FileMenu />
+        </div>
+      </div>
+      <div
+        className={`toggle-sidebar-ui-button ${!toggleUI ? "active" : ""}`}
+        onClick={() => {
+          setToggleUI(!toggleUI);
+        }}
+      >
+        <ToggleSidebarIcon />
+      </div>
     </div>
   );
 };

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

@@ -1,8 +1,47 @@
-import React from 'react';
+import React, { useState } from "react";
+import Search from "../../ui/inputs/Search";
+import DropDownList from "../../ui/list/DropDownList";
 
 const Outline: React.FC = () => {
+  const [searchValue, setSearchValue] = useState<string>("");
+
+  const handleSearchChange = (value: string) => {
+    setSearchValue(value);
+    console.log(value); // Log the search value if needed
+  };
+
+  const dropdownItems = [
+    { id: "1", name: "Ground Floor" },
+    { id: "2", name: "Floor 1" },
+  ]; // Example dropdown items
+
   return (
-    <div>Outline</div>
+    <div className="outline-container">
+      <Search onChange={handleSearchChange} />
+      {searchValue ? (
+        <div className="searched-content">
+          <p>Results for "{searchValue}"</p>
+        </div>
+      ) : (
+        <div className="outline-content-container">
+          <DropDownList
+            value="Layers"
+            items={dropdownItems}
+            defaultOpen={true}
+            showKebabMenu={false}
+            showFocusIcon={true}
+          />
+          <DropDownList
+            value="Scene"
+            items={dropdownItems}
+            defaultOpen={true}
+            listType="outline"
+            showKebabMenu={false}
+            showAddIcon={false}
+          />
+        </div>
+      )}
+    </div>
   );
 };
 

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

@@ -1,23 +1,53 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import ToggleHeader from "../../ui/inputs/ToggleHeader";
-import Search from "../../ui/inputs/Search";
+import Outline from "./Outline";
+import Header from "./Header";
+import useToggleStore from "../../../store/useUIToggleStore";
+import Assets from "./Assets";
+import useModuleStore from "../../../store/useModuleStore";
 
 const SideBarLeft: React.FC = () => {
-  const [activeOption, setActiveOption] = useState("Option 1");
+  const [activeOption, setActiveOption] = useState("Outline");
+
+  const { toggleUI } = useToggleStore();
+  const { activeModule } = useModuleStore();
+
+  // Reset activeList whenever activeModule changes
+  useEffect(() => {
+    setActiveOption("Outline");
+  }, [activeModule]);
 
   const handleToggleClick = (option: string) => {
     setActiveOption(option); // Update the active option
   };
   return (
-    <>
-      <div>SideBarLeft</div>
-      <ToggleHeader
-        options={["Outline", "Assets"]}
-        activeOption={activeOption}
-        handleClick={handleToggleClick}
-      />
-      <Search onChange={(value) => console.log(value)} />
-    </>
+    <div className="sidebar-left-wrapper">
+      <Header />
+      {toggleUI && (
+        <div className="sidebar-left-container">
+          {activeModule === "visualization" ? (
+            <>
+              <ToggleHeader
+                options={["Outline", "Widgets", "Templates"]}
+                activeOption={activeOption}
+                handleClick={handleToggleClick}
+              />
+            </>
+          ) : (
+            <>
+              <ToggleHeader
+                options={["Outline", "Assets"]}
+                activeOption={activeOption}
+                handleClick={handleToggleClick}
+              />
+              <div className="sidebar-left-content-container">
+                {activeOption === "Outline" ? <Outline /> : <Assets />}
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
   );
 };
 

app/src/components/layout/sidebarRight/Header.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { AppDockIcon } from "../../icons/HeaderIcons";
+
+const Header: React.FC = () => {
+  const guestUsers = [
+    { value: "Nazria", color: "#43C06D" },
+    { value: "Name1", color: "#0050EB" },
+    { value: "Abigail", color: "#FF6600" },
+    { value: "Jack", color: "#488EF6" },
+  ]; // Example guest users array
+
+  return (
+    <div className="header-container">
+      <div className="options-container">
+        <div className="share-button">Share</div>
+        <div className="app-docker-button">
+          <AppDockIcon />
+        </div>
+      </div>
+      <div className="split"></div>
+      <div className="users-container">
+        <div className="guest-users-container">
+          {guestUsers.length > 3 && (
+            <div className="other-guest">+{guestUsers.length - 3}</div>
+          )}
+          {guestUsers.slice(0, 3).map((user, index) => (
+            <div
+              key={index}
+              className="user-profile"
+              style={{ background: user.color }}
+            >
+              {user.value[0]}
+            </div>
+          ))}
+        </div>
+        <div className="user-profile-container">
+          <div className="user-profile" style={{ background: "#48AC2A" }}>
+            V
+          </div>
+          <div className="user-organization">
+            <img src="" alt="" />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

app/src/components/layout/sidebarRight/SideBarRight.tsx

@@ -1,8 +1,67 @@
-import React from 'react';
+import React, { useEffect, useState } from "react";
+import Header from "./Header";
+import useModuleStore from "../../../store/useModuleStore";
+import {
+  AnalysisIcon,
+  MechanicsIcon,
+  PropertiesIcon,
+} from "../../icons/SimulationIcons";
+import useToggleStore from "../../../store/useUIToggleStore";
+import MachineMechanics from "./mechanics/MachineMechanics";
 
 const SideBarRight: React.FC = () => {
+  const { activeModule } = useModuleStore();
+  const [activeList, setActiveList] = useState("properties");
+  const { toggleUI } = useToggleStore();
+
+  // Reset activeList whenever activeModule changes
+  useEffect(() => {
+    setActiveList("properties");
+  }, [activeModule]);
+
   return (
-    <div>SideBarRight</div>
+    <div className="sidebar-right-wrapper">
+      <Header />
+      {toggleUI && (
+        <div className="sidebar-actions-container">
+          <div
+            className={`sidebar-action-list ${
+              activeList === "properties" ? "active" : ""
+            }`}
+            onClick={() => setActiveList("properties")}
+          >
+            <PropertiesIcon isActive={activeList === "properties"} />
+          </div>
+          {activeModule === "simulation" && (
+            <>
+              <div
+                className={`sidebar-action-list ${
+                  activeList === "mechanics" ? "active" : ""
+                }`}
+                onClick={() => setActiveList("mechanics")}
+              >
+                <MechanicsIcon isActive={activeList === "mechanics"} />
+              </div>
+              <div
+                className={`sidebar-action-list ${
+                  activeList === "analysis" ? "active" : ""
+                }`}
+                onClick={() => setActiveList("analysis")}
+              >
+                <AnalysisIcon isActive={activeList === "analysis"} />
+              </div>
+            </>
+          )}
+        </div>
+      )}
+      {toggleUI && (
+        <div className="sidebar-right-container">
+          <div className="sidebar-right-content-container">
+            <MachineMechanics />
+          </div>
+        </div>
+      )}
+    </div>
   );
 };
 

app/src/components/layout/sidebarRight/mechanics/MachineMechanics.tsx

@@ -0,0 +1,176 @@
+import React, { useState } from "react";
+import {
+  AddIcon,
+  InfoIcon,
+  RemoveIcon,
+  ResizeHeightIcon,
+} from "../../../icons/ExportCommonIcons";
+
+const MachineMechanics: React.FC = () => {
+  const [actionList, setActionList] = useState<string[]>([]);
+  const [triggerList, setTriggerList] = useState<string[]>([]);
+  const [selectedItem, setSelectedItem] = useState<{
+    type: "action" | "trigger";
+    name: string;
+  } | null>(null);
+  const [editedName, setEditedName] = useState<string>("");
+
+  const handleAddAction = () => {
+    setActionList([...actionList, `Action ${actionList.length + 1}`]);
+  };
+
+  const handleAddTrigger = () => {
+    setTriggerList([...triggerList, `Trigger ${triggerList.length + 1}`]);
+  };
+
+  const handleRemoveAction = (index: number) => {
+    setActionList(actionList.filter((_, i) => i !== index));
+    if (
+      selectedItem?.type === "action" &&
+      selectedItem.name === actionList[index]
+    ) {
+      setSelectedItem(null);
+      setEditedName("");
+    }
+  };
+
+  const handleRemoveTrigger = (index: number) => {
+    setTriggerList(triggerList.filter((_, i) => i !== index));
+    if (
+      selectedItem?.type === "trigger" &&
+      selectedItem.name === triggerList[index]
+    ) {
+      setSelectedItem(null);
+      setEditedName("");
+    }
+  };
+
+  const handleSelectItem = (type: "action" | "trigger", name: string) => {
+    setSelectedItem({ type, name });
+    setEditedName(name);
+  };
+
+  const handleSave = () => {
+    if (!selectedItem) return;
+
+    if (selectedItem.type === "action") {
+      setActionList(
+        actionList.map((action) =>
+          action === selectedItem.name ? editedName : action
+        )
+      );
+    } else if (selectedItem.type === "trigger") {
+      setTriggerList(
+        triggerList.map((trigger) =>
+          trigger === selectedItem.name ? editedName : trigger
+        )
+      );
+    }
+
+    setSelectedItem({ ...selectedItem, name: editedName });
+  };
+
+  return (
+    <div className="machine-mechanics-container">
+      <div className="actions">
+        <div className="header">
+          <div className="header-value">Actions</div>
+          <div className="add-button" onClick={handleAddAction}>
+            <AddIcon /> Add
+          </div>
+        </div>
+        <div className="lists-main-container">
+          <div className="list-container">
+            {actionList.map((action, index) => (
+              <div
+                key={index}
+                className={`list-item ${
+                  selectedItem?.type === "action" && selectedItem.name === action
+                    ? "active"
+                    : ""
+                }`}
+              >
+                <div className="value" onClick={() => handleSelectItem("action", action)}>
+                  {action}
+                </div>
+                <div
+                  className="remove-button"
+                  onClick={() => handleRemoveAction(index)}
+                >
+                  <RemoveIcon />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="resize-icon">
+            <ResizeHeightIcon />
+          </div>
+        </div>
+      </div>
+      <div className="triggers">
+        <div className="header">
+          <div className="header-value">Triggers</div>
+          <div className="add-button" onClick={handleAddTrigger}>
+            <AddIcon /> Add
+          </div>
+        </div>
+        <div className="lists-main-container">
+          <div className="list-container">
+            {triggerList.map((trigger, index) => (
+              <div
+                key={index}
+                className={`list-item ${
+                  selectedItem?.type === "trigger" &&
+                  selectedItem.name === trigger
+                    ? "active"
+                    : ""
+                }`}
+              >
+                <div className="value" onClick={() => handleSelectItem("trigger", trigger)}>
+                  {trigger}
+                </div>
+                <div
+                  className="remove-button"
+                  onClick={() => handleRemoveTrigger(index)}
+                >
+                  <RemoveIcon />
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="resize-icon">
+            <ResizeHeightIcon />
+          </div>
+        </div>
+      </div>
+      <div className="selected-properties-container">
+        {selectedItem && (
+          <>
+            <div>
+              <label>Edit Name:</label>
+              <input
+                type="text"
+                value={editedName}
+                onChange={(e) => setEditedName(e.target.value)}
+              />
+            </div>
+            {/* Add other Properties Like:
+             * Object Selection Dropdown
+             * Buffer Time
+             * Get Value From Object
+             * Action
+             * etc.
+             */}
+            <div onClick={handleSave}>Update</div> {/* remove this */}
+          </>
+        )}
+      </div>
+      <div className="footer">
+        <InfoIcon />
+        By Selecting Path, you can create Object Triggers.
+      </div>
+    </div>
+  );
+};
+
+export default MachineMechanics;

app/src/components/layout/sidebarRight/properties/Properties.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+
+const GlobalProperties: React.FC = () => {
+  return (
+    <div>GlobalProperties</div>
+  );
+};
+
+export default GlobalProperties;