add ability to add icon on nav items / sub menu

Author: iamfaran

client/packages/lowcoder/src/comps/comps/navComp/components/NavItemsControl.tsx

@@ -5,6 +5,7 @@ import { dropdownControl } from "comps/controls/dropdownControl";
 import { mapOptionsControl } from "comps/controls/optionsControl";
 import { trans } from "i18n";
 import { navListComp } from "../navItemComp";
+import { IconControl } from "comps/controls/iconControl";
 import { controlItem } from "lowcoder-design";
 import { menuPropertyView } from "./MenuItemList";
 
@@ -17,6 +18,7 @@ export function createNavItemsControl() {
   const NavMapOption = new MultiCompBuilder(
     {
       label: StringControl,
+      icon: IconControl,
       hidden: BoolCodeControl,
       disabled: BoolCodeControl,
       active: BoolCodeControl,
@@ -27,6 +29,7 @@ export function createNavItemsControl() {
     .setPropertyViewFn((children) => (
       <>
         {children.label.propertyView({ label: trans("label"), placeholder: "{{item}}" })}
+        {children.icon.propertyView({ label: trans("icon") })}
         {children.active.propertyView({ label: trans("navItemComp.active") })}
         {children.hidden.propertyView({ label: trans("hidden") })}
         {children.disabled.propertyView({ label: trans("disabled") })}

client/packages/lowcoder/src/comps/comps/navComp/navComp.tsx

@@ -107,7 +107,6 @@ const Item = styled.div<{
   $radius?: string;
   $disabled?: boolean;
 }>`
-  height: 30px;
   line-height: 30px;
   padding: ${(props) => props.$padding ? props.$padding : '0 16px'};
   color: ${(props) => props.$disabled ? `${props.$color}80` : (props.$active ? props.$activeColor : props.$color)};
@@ -303,7 +302,7 @@ function renderStyleSections(children: any, styleSegment: MenuItemStyleOptionVal
           {children.style.getPropertyView()}
         </Section>
       )}
-      <Section name={isHamburger ? "Drawer Item Style" : trans("navLayout.navItemStyle")}>
+      <Section name={trans("navLayout.navItemStyle")}>
         {controlItem({}, (
           <Segmented
             block
@@ -391,12 +390,13 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
         }
 
         const label = view?.label;
+        const icon = hasIcon(view?.icon) ? view.icon : undefined;
         const active = !!view?.active;
         const onEvent = view?.onEvent;
         const disabled = !!view?.disabled;
         const subItems = isCompItem ? view?.items : [];
 
-        const subMenuItems: Array<{ key: string; label: any; disabled?: boolean }> = [];
+        const subMenuItems: Array<{ key: string; label: any; icon?: any; disabled?: boolean }> = [];
         const subMenuSelectedKeys: Array<string> = [];
 
         if (Array.isArray(subItems)) {
@@ -406,9 +406,11 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             }
             const key = originalIndex + "";
             subItem.children.active.getView() && subMenuSelectedKeys.push(key);
+            const subIcon = hasIcon(subItem.children.icon?.getView?.()) ? subItem.children.icon.getView() : undefined;
             subMenuItems.push({
               key: key,
               label: subItem.children.label.getView(),
+              icon: subIcon,
               disabled: !!subItem.children.disabled.getView(),
             });
           });
@@ -439,6 +441,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
             $disabled={disabled}
             onClick={() => { if (!disabled && onEvent) onEvent("click"); }}
           >
+            {icon && <span style={{ display: 'inline-flex', marginRight: '8px' }}>{icon}</span>}
             {label}
             {Array.isArray(subItems) && subItems.length > 0 && <DownOutlined />}
           </Item>
@@ -455,7 +458,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
                 onSubEvent && onSubEvent("click");
               }}
               selectedKeys={subMenuSelectedKeys}
-              items={subMenuItems}
+              items={subMenuItems.map(item => ({
+                ...item,
+                icon: item.icon || undefined,
+              }))}
             />
           );
           return (

client/packages/lowcoder/src/comps/comps/navComp/navItemComp.tsx

@@ -8,11 +8,13 @@ import { trans } from "i18n";
 import _ from "lodash";
 import { fromRecord, MultiBaseComp, Node, RecordNode, RecordNodeToValue } from "lowcoder-core";
 import { ReactNode } from "react";
+import { IconControl } from "comps/controls/iconControl";
 
 const events = [clickEvent];
 
 const childrenMap = {
   label: StringControl,
+  icon: IconControl,
   hidden: BoolCodeControl,
   disabled: BoolCodeControl,
   active: BoolCodeControl,
@@ -29,6 +31,7 @@ const childrenMap = {
 
 type ChildrenType = {
   label: InstanceType<typeof StringControl>;
+  icon: InstanceType<typeof IconControl>;
   hidden: InstanceType<typeof BoolCodeControl>;
   disabled: InstanceType<typeof BoolCodeControl>;
   active: InstanceType<typeof BoolCodeControl>;
@@ -45,6 +48,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
     return (
       <>
         {this.children.label.propertyView({ label: trans("label") })}
+        {this.children.icon.propertyView({ label: trans("icon") })}
         {hiddenPropertyView(this.children)}
         {this.children.active.propertyView({ label: trans("navItemComp.active") })}
         {disabledPropertyView(this.children)}
@@ -71,6 +75,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
   exposingNode(): RecordNode<NavItemExposing> {
     return fromRecord({
       label: this.children.label.exposingNode(),
+      icon: this.children.icon.exposingNode(),
       hidden: this.children.hidden.exposingNode(),
       disabled: this.children.disabled.exposingNode(),
       active: this.children.active.exposingNode(),
@@ -81,6 +86,7 @@ export class NavItemComp extends MultiBaseComp<ChildrenType> {
 
 type NavItemExposing = {
   label: Node<string>;
+  icon: Node<any>;
   hidden: Node<boolean>;
   disabled: Node<boolean>;
   active: Node<boolean>;