first commit

initialized project
updated theme addaptive svg icons
defined project structure

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

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

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

@@ -0,0 +1,11 @@
+import React from 'react';
+
+const Header: React.FC = () => {
+  return (
+    <div className="header-container">
+        
+    </div>
+  );
+};
+
+export default Header;

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

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

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

@@ -0,0 +1,24 @@
+import React, { useState } from "react";
+import ToggleHeader from "../../ui/inputs/ToggleHeader";
+import Search from "../../ui/inputs/Search";
+
+const SideBarLeft: React.FC = () => {
+  const [activeOption, setActiveOption] = useState("Option 1");
+
+  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)} />
+    </>
+  );
+};
+
+export default SideBarLeft;

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

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