add some more icons

src/components/SidebarSettings.tsx

@@ -1,10 +1,15 @@
 "use client";
 
 import { SidebarNav } from "@app/components/sidebar-nav";
+import React from "react";
 
 interface SideBarSettingsProps {
     children: React.ReactNode;
-    sidebarNavItems: Array<{ title: string; href: string }>;
+    sidebarNavItems: Array<{
+        title: string;
+        href: string;
+        icon?: React.ReactNode;
+    }>;
     disabled?: boolean;
     limitWidth?: boolean;
 }

src/components/sidebar-nav.tsx

@@ -17,6 +17,7 @@ interface SidebarNavProps extends React.HTMLAttributes<HTMLElement> {
     items: {
         href: string;
         title: string;
+        icon?: React.ReactNode;
     }[];
     disabled?: boolean;
 }
@@ -105,7 +106,14 @@ export function SidebarNav({
                         tabIndex={disabled ? -1 : undefined}
                         aria-disabled={disabled}
                     >
-                        {item.title}
+                        {item.icon ? (
+                            <div className="flex items-center space-x-2">
+                                {item.icon}
+                                <span>{item.title}</span>
+                            </div>
+                        ) : (
+                            item.title
+                        )}
                     </Link>
                 ))}
             </nav>