Admin Sidebar: support optional icons for extendable submenu

src/app/admin/admin-sidebar/admin-sidebar.component.scss

@@ -56,6 +56,20 @@
         padding-bottom: var(--ds-admin-sidebar-item-padding);
       }
 
+      // Menu item layout to align the optional icon and text label
+      .ds-menu-item {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        box-sizing: border-box;
+        gap: var(--ds-admin-sidebar-item-padding);
+
+        span {
+          flex: 1;
+          min-width: 0;
+        }
+      }
+
       // These classes handle the collapsing behavior
       .sidebar-section-wrapper {
 

src/app/shared/menu/menu-item/external-link-menu-item.component.html

@@ -5,4 +5,8 @@
    [href]="href"
    [title]="item.text | translate"
    (click)="$event.stopPropagation()"
->{{item.text | translate}}</a>
+>@if (item.icon) {
+    <i class="fas fa-{{item.icon}} fa-fw" aria-hidden="true"></i>
+  }
+  <span>{{item.text | translate}}</span>
+</a>

src/app/shared/menu/menu-item/link-menu-item.component.html

@@ -9,4 +9,8 @@
    (keydown.enter)="navigate($event)"
    href="javascript:void(0);"
    tabindex="0"
->{{item.text | translate}}</a>
+>@if (item.icon) {
+    <i class="fas fa-{{item.icon}} fa-fw" aria-hidden="true"></i>
+  }
+  <span>{{item.text | translate}}</span>
+</a>

src/app/shared/menu/menu-item/link-menu-item.component.spec.ts

@@ -87,4 +87,29 @@ describe('LinkMenuItemComponent', () => {
     expect(routerParamsQuery.length).toBe(1);
     expect(routerParamsQuery[0].queryParams).toBe(queryParams);
   });
+
+  describe('icon rendering', () => {
+    beforeEach(() => {
+      component.item.icon = undefined;
+      fixture.detectChanges();
+    });
+
+    it('should render the icon when item.icon is provided', () => {
+      component.item.icon = 'cog';
+      fixture.detectChanges();
+
+      const icon = debugElement.query(By.css('i.fa-cog'));
+
+      expect(icon).toBeTruthy();
+      expect(icon.nativeElement.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('should not render the icon when item.icon is not provided', () => {
+      fixture.detectChanges();
+
+      const icon = debugElement.query(By.css('i.fas'));
+
+      expect(icon).toBeFalsy();
+    });
+  });
 });

src/app/shared/menu/menu-item/models/external-link.model.ts

@@ -9,4 +9,5 @@ export class ExternalLinkMenuItemModel implements MenuItemModel {
   disabled?: boolean;
   text: string;
   href: string;
+  icon?: string;
 }

src/app/shared/menu/menu-item/models/link.model.ts

@@ -12,4 +12,5 @@ export class LinkMenuItemModel implements MenuItemModel {
   text: string;
   link: string;
   queryParams?: Params | null;
+  icon?: string;
 }

src/app/shared/menu/menu-item/models/menu-item.model.ts

@@ -6,4 +6,5 @@ import { MenuItemType } from '../../menu-item-type.model';
 export interface MenuItemModel {
   type: MenuItemType;
   disabled?: boolean;
+  icon?: string;
 }

src/app/shared/menu/menu-item/models/onclick.model.ts

@@ -8,5 +8,6 @@ export class OnClickMenuItemModel implements MenuItemModel {
   type = MenuItemType.ONCLICK;
   disabled?: boolean;
   text: string;
+  icon?: string;
   function: () => void;
 }

src/app/shared/menu/menu-item/models/text.model.ts

@@ -8,4 +8,5 @@ export class TextMenuItemModel implements MenuItemModel {
   type = MenuItemType.TEXT;
   disabled?: boolean;
   text: string;
+  icon?: string;
 }

src/app/shared/menu/menu-item/onclick-menu-item.component.html

@@ -8,8 +8,17 @@
     (keyup.space)="activate($event)"
     (keyup.enter)="activate($event)"
     [attr.data-test]="item.text"
-  >{{item.text | translate}}</a>
+  >@if (item.icon) {
+      <i class="fas fa-{{item.icon}} fa-fw" aria-hidden="true"></i>
+    }
+    <span>{{item.text | translate}}</span>
+  </a>
 }
 @if (item.disabled) {
-  <span [attr.data-test]="item.text" class="nav-item nav-link disabled">{{item.text | translate}}</span>
+  <span [attr.data-test]="item.text" class="ds-menu-item nav-item nav-link disabled">
+    @if (item.icon) {
+      <i class="fas fa-{{item.icon}} fa-fw" aria-hidden="true"></i>
+    }
+    <span>{{item.text | translate}}</span>
+  </span>
 }

src/app/shared/menu/menu-item/onclick-menu-item.component.spec.ts

@@ -38,6 +38,7 @@ describe('OnClickMenuItemComponent', () => {
     spyOn(item, 'function');
     fixture = TestBed.createComponent(OnClickMenuItemComponent);
     component = fixture.componentInstance;
+    component.item = item;
     debugElement = fixture.debugElement;
     fixture.detectChanges();
   });
@@ -55,4 +56,41 @@ describe('OnClickMenuItemComponent', () => {
     debugElement.query(By.css('a.ds-menu-item')).triggerEventHandler('click', new Event(('click')));
     expect(item.function).toHaveBeenCalled();
   });
+
+  describe('icon rendering', () => {
+    beforeEach(() => {
+      item.icon = undefined;
+      item.disabled = false;
+      fixture.detectChanges();
+    });
+
+    it('should render the icon when item.icon is provided and enabled', () => {
+      item.icon = 'users';
+      fixture.detectChanges();
+
+      const icon = debugElement.query(By.css('a.ds-menu-item i.fa-users'));
+
+      expect(icon).toBeTruthy();
+      expect(icon.nativeElement.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('should render the icon when item.icon is provided and disabled', () => {
+      item.icon = 'users';
+      item.disabled = true;
+      fixture.detectChanges();
+
+      const icon = debugElement.query(By.css('span.ds-menu-item i.fa-users'));
+
+      expect(icon).toBeTruthy();
+      expect(icon.nativeElement.getAttribute('aria-hidden')).toBe('true');
+    });
+
+    it('should not render the icon when item.icon is not provided', () => {
+      fixture.detectChanges();
+
+      const icon = debugElement.query(By.css('i.fas'));
+
+      expect(icon).toBeFalsy();
+    });
+  });
 });

src/app/shared/menu/menu-item/text-menu-item.component.html

@@ -1 +1,9 @@
-<span class="ds-menu-item" [class.disabled]="item.disabled" tabindex="0" role="button">{{item.text | translate}}</span>
+<span class="ds-menu-item"
+      [class.disabled]="item.disabled"
+      tabindex="0"
+      role="button"
+>@if (item.icon) {
+    <i class="fas fa-{{item.icon}} fa-fw" aria-hidden="true"></i>
+  }
+  <span>{{item.text | translate}}</span>
+</span>