customizable icon color

components/Sidebar/SidebarItem.tsx

@@ -7,9 +7,16 @@ interface SidebarItemProps {
   icon: ReactElement;
   path: string;
   className?: string;
+  iconColor?: string;
 }
 
-export default function ({ text, icon, path, className }: SidebarItemProps) {
+export default function ({
+  text,
+  icon,
+  path,
+  className,
+  iconColor,
+}: SidebarItemProps) {
   const router = useRouter();
   const [active, setActive] = useState(false);
 
@@ -23,10 +30,13 @@ export default function ({ text, icon, path, className }: SidebarItemProps) {
       <div
         className={`${
           active ? "bg-sky-500" : "hover:bg-slate-200 bg-gray-100"
-        } duration-100 py-1 px-4 cursor-pointer flex items-center gap-2 w-full ${className}`}
+        } duration-100 py-1 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md ${className}`}
       >
         {React.cloneElement(icon, {
-          className: `w-4 h-4 ${active ? "text-white" : "text-sky-300"}`,
+          className: "w-4 h-4",
+          style: {
+            color: active ? "white" : iconColor ? iconColor : "#7dd3fc",
+          },
         })}
         <p
           className={`${active ? "text-white" : "text-sky-900"} truncate w-4/6`}