Display icons on sidebar sub-menu items. (#5872)

Author: bilalabbad

changelog/+icon-sub-menu.added.md

@@ -0,0 +1 @@
+In the sidebar, sub-menu items now support icons.

frontend/app/src/shared/components/layout/menu-navigation/components/menu-section-internal.tsx

@@ -25,14 +25,20 @@ const RecursiveInternalMenuItem: React.FC<{ item: MenuItem }> = ({ item }) => {
   if (!item.children?.length) {
     return (
       <DropdownMenuItem asChild>
-        <Link to={constructPath(item.path)}>{item.label}</Link>
+        <Link to={constructPath(item.path)}>
+          <Icon icon={item.icon} className="min-w-4" />
+          {item.label}
+        </Link>
       </DropdownMenuItem>
     );
   }
 
   return (
     <DropdownMenuSub>
-      <DropdownMenuSubTrigger>{item.label}</DropdownMenuSubTrigger>
+      <DropdownMenuSubTrigger>
+        <Icon icon={item.icon} className="min-w-4" />
+        {item.label}
+      </DropdownMenuSubTrigger>
       <DropdownMenuSubContent>
         {item.children.map((childItem) => (
           <RecursiveInternalMenuItem key={childItem.identifier} item={childItem} />

frontend/app/src/shared/components/ui/dropdown-menu.tsx

@@ -75,7 +75,7 @@ export const DropdownMenuSubTrigger = forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={classNames(
-      "flex cursor-default select-none items-center rounded-lg p-2 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100",
+      "flex gap-1.5 cursor-default select-none items-center rounded-lg p-2 text-sm outline-none focus:bg-neutral-100 data-[state=open]:bg-neutral-100",
       className
     )}
     {...props}