improve the text template of user menu

npm/ng-packs/packages/theme-basic/src/lib/components/nav-items/current-user.component.html

@@ -48,8 +48,13 @@
           </ng-template>
 
           <ng-template #textTemplate>
-            <a (click)="item.action ? item.action() : null" class="dropdown-item pointer">
+            <a
-              {{ item.text }}</a
+              *ngIf="item.textTemplate"
+              (click)="item.action ? item.action() : null"
+              class="dropdown-item pointer"
+            >
+              <i *ngIf="item.textTemplate.icon" class="me-1 {{ item.textTemplate.icon }}"></i>
+              {{ item.textTemplate.text | abpLocalization }}</a
             >
           </ng-template>
         </li>

npm/ng-packs/packages/theme-basic/src/lib/providers/user-menu.provider.ts

@@ -1,12 +1,6 @@
-import {
+import { AuthService, NAVIGATE_TO_MANAGE_PROFILE } from '@abp/ng.core';
-  AuthService,
-  ConfigStateService,
-  LocalizationService,
-  NAVIGATE_TO_MANAGE_PROFILE,
-} from '@abp/ng.core';
 import { UserMenuService } from '@abp/ng.theme.shared';
 import { APP_INITIALIZER, Injector } from '@angular/core';
-import { filter } from 'rxjs/operators';
 import { eUserMenuItems } from '../enums/user-menu-items';
 
 export const BASIC_THEME_USER_MENU_PROVIDERS = [
@@ -19,41 +13,32 @@ export const BASIC_THEME_USER_MENU_PROVIDERS = [
 ];
 
 export function configureUserMenu(injector: Injector) {
-  const configState = injector.get(ConfigStateService);
   const userMenu = injector.get(UserMenuService);
-  const localization = injector.get(LocalizationService);
   const authService = injector.get(AuthService);
   const navigateToManageProfile = injector.get(NAVIGATE_TO_MANAGE_PROFILE);
 
   return () => {
-    configState
+    userMenu.addItems([
-      .getAll$()
+      {
-      .pipe(filter(res => !!res?.localization))
+        id: eUserMenuItems.MyAccount,
-      .subscribe(() => {
+        order: 100,
-        userMenu.addItems([
+        textTemplate: {
-          {
+          text: 'AbpAccount::MyAccount',
-            id: eUserMenuItems.MyAccount,
+          icon: 'fa fa-cog',
-            order: 100,
+        },
-            html: `
+        action: () => navigateToManageProfile(),
-          <a class="dropdown-item pointer"
+      },
-          ><i class="fa fa-cog me-1"></i>${localization.instant('AbpAccount::MyAccount')}</a
+      {
-        >
+        id: eUserMenuItems.Logout,
-          `,
+        order: 101,
-            action: () => navigateToManageProfile(),
+        textTemplate: {
-          },
+          text: 'AbpUi::Logout',
-          {
+          icon: 'fa fa-power-off',
-            id: eUserMenuItems.Logout,
+        },
-            order: 101,
+        action: () => {
-            html: `
+          authService.logout().subscribe();
-          <a class="dropdown-item" href="javascript:void(0)"
+        },
-          ><i class="fa fa-power-off me-1"></i>${localization.instant('AbpUi::Logout')}</a
+      },
-        >
+    ]);
-          `,
-            action: () => {
-              authService.logout().subscribe();
-            },
-          },
-        ]);
-      });
   };
 }

npm/ng-packs/packages/theme-shared/src/lib/models/user-menu.ts

@@ -1,5 +1,10 @@
 import { NavItem } from './nav-item';
 
 export class UserMenu extends NavItem {
-  text?: string;
+  textTemplate?: UserMenuTextTemplate;
+}
+
+export interface UserMenuTextTemplate {
+  text: string;
+  icon?: string;
 }