Added new folder on My Collection

src/frontend/src/components/sidebarComponent/index.tsx

@@ -7,11 +7,16 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     href: string;
     title: string;
   }[];
+  secondaryItems?: {
+    href: string;
+    title: string;
+  }[];
 }
 
 export default function SidebarNav({
   className,
   items,
+  secondaryItems,
   ...props
 }: SidebarNavProps) {
   const location = useLocation();
@@ -40,6 +45,19 @@ export default function SidebarNav({
           {item.title}
         </Link>
       ))}
+      {/* {secondaryItems && (
+        <>
+          <div className="py-2">
+            <Separator />
+          </div>
+          <div className="flex justify-center">
+            <button className="flex h-8 w-fit items-center justify-between rounded-md border border-ring/60 px-4 py-2 text-sm text-primary hover:bg-muted">
+              <IconComponent name="FolderPlus" className="mr-2 h-4 w-4 " />
+              New Folder
+            </button>
+          </div>
+        </>
+      )} */}
     </nav>
   );
 }

src/frontend/src/pages/MainPage/index.tsx

@@ -93,7 +93,10 @@ export default function HomePage(): JSX.Element {
         <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-8 lg:space-y-0">
           <aside className="space-y-6 lg:w-1/5">
             {/* <Input placeholder="Search" onChange={(e) => {}} /> */}
-            <SidebarNav items={sidebarNavItems} />
+            <SidebarNav
+              items={sidebarNavItems}
+              secondaryItems={sidebarNavItems}
+            />
           </aside>
           <div className="w-full flex-1">
             <Outlet />

src/frontend/src/style/applies.css

@@ -217,7 +217,7 @@
   }
 
   .main-page-nav-arrangement {
-    @apply flex-max-width justify-between px-6 py-8 pb-2;
+    @apply flex-max-width justify-between py-8 pb-2;
   }
 
   .main-page-nav-title {
@@ -229,11 +229,11 @@
   }
 
   .main-page-description-text {
-    @apply flex w-[60%] px-6 pb-4 text-muted-foreground;
+    @apply flex w-[60%] pb-4 text-muted-foreground;
   }
 
   .admin-page-description-text {
-    @apply flex w-[80%] px-6 pb-8 text-muted-foreground;
+    @apply flex w-[80%] pb-8 text-muted-foreground;
   }
 
   .main-page-flows-display {

src/frontend/src/utils/styleUtils.ts

@@ -32,6 +32,7 @@ import {
   FileText,
   FileUp,
   Fingerprint,
+  FolderPlus,
   Gift,
   GitBranchPlus,
   GitFork,
@@ -300,6 +301,7 @@ export const nodeIconsLucide: iconsType = {
   DownloadCloud,
   File,
   FileText,
+  FolderPlus,
   GitFork,
   GithubIcon,
   FileDown,