feature(theme-basic): navbar supports to add icon

npm/ng-packs/packages/core/src/lib/models/common.ts

@@ -31,6 +31,7 @@ export namespace ABP {
     parentName?: string;
     path: string;
     requiredPolicy?: string;
+    iconClass?: string;
   }
 
   export interface FullRoute extends Route {

npm/ng-packs/packages/core/src/lib/plugins/config.plugin.ts

@@ -47,7 +47,9 @@ function transformRoutes(routes: Routes = [], wrappers: ABP.FullRoute[] = []): a
   routes
     .filter(route => (route.data || {}).routes && (route.component || route.loadChildren))
     .forEach(route => {
-      const abpPackage = abpRoutes.find(abp => abp.path.toLowerCase() === route.path.toLowerCase());
+      const abpPackage = abpRoutes.find(
+        abp => abp.path.toLowerCase() === route.path.toLowerCase() && snq(() => route.data.routes.length, false),
+      );
       const { length } = transformed;
 
       if (abpPackage) {

npm/ng-packs/packages/core/src/lib/utils/route-utils.ts

@@ -7,7 +7,7 @@ export function organizeRoutes(
   parentName: string = null,
 ): ABP.FullRoute[] {
   const filter = route => {
-    if (route.children) {
+    if (route.children && route.children.length) {
       route.children = organizeRoutes(route.children, wrappers, parentNameArr, route.name);
     }
 
@@ -34,20 +34,18 @@ export function organizeRoutes(
 }
 
 export function setChildRoute(routes: ABP.FullRoute[], parentNameArr: ABP.FullRoute[]): ABP.FullRoute[] {
-  return routes
-    .map(route => {
-      if (route.children && route.children.length) {
-        route.children = setChildRoute(route.children, parentNameArr);
-      }
+  return routes.map(route => {
+    if (route.children && route.children.length) {
+      route.children = setChildRoute(route.children, parentNameArr);
+    }
 
-      const foundedChildren = parentNameArr.filter(parent => parent.parentName === route.name);
-      if (foundedChildren && foundedChildren.length) {
-        route.children = [...(route.children || []), ...foundedChildren];
-      }
+    const foundedChildren = parentNameArr.filter(parent => parent.parentName === route.name);
+    if (foundedChildren && foundedChildren.length) {
+      route.children = [...(route.children || []), ...foundedChildren];
+    }
 
-      return route;
-    })
-    .filter(route => route.path || (route.children && route.children.length));
+    return route;
+  });
 }
 
 export function sortRoutes(routes: ABP.FullRoute[] = []): ABP.FullRoute[] {

npm/ng-packs/packages/identity/src/lib/constants/routes.ts

@@ -8,11 +8,12 @@ export const IDENTITY_ROUTES = [
     wrapper: true,
   },
   {
-    name: 'Identity',
+    name: 'Identity Management',
     path: 'identity',
     order: 1,
     parentName: 'Administration',
     layout: eLayoutType.application,
+    iconClass: 'fa fa-id-card-o',
     children: [
       { path: 'roles', name: 'Roles', order: 2, requiredPolicy: 'AbpIdentity.Roles' },
       { path: 'users', name: 'Users', order: 1, requiredPolicy: 'AbpIdentity.Users' },

npm/ng-packs/packages/tenant-management/src/lib/constants/routes.ts

@@ -6,6 +6,7 @@ export const TENANT_MANAGEMENT_ROUTES = [
     path: 'tenant-management',
     parentName: 'Administration',
     layout: eLayoutType.application,
+    iconClass: 'fa fa-users',
     children: [
       {
         path: 'tenants',

npm/ng-packs/packages/theme-basic/src/lib/components/layout-application/layout-application.component.html

@@ -46,7 +46,10 @@
 
     <ng-template #defaultChild let-child>
       <div class="dropdown-submenu" [abpPermission]="child.requiredPolicy">
-        <a class="dropdown-item py-2 px-2" [routerLink]="[child.url]">{{ child.name | abpLocalization }}</a>
+        <a class="dropdown-item py-2 px-2" [routerLink]="[child.url]">
+          <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
+          {{ child.name | abpLocalization }}</a
+        >
       </div>
     </ng-template>
 
@@ -61,11 +64,12 @@
       >
         <div ngbDropdownToggle [class.dropdown-toggle]="false" class="pointer">
           <a
-            abpEllipsis="140px"
+            abpEllipsis="200px"
             [abpEllipsisEnabled]="isDropdownChildDynamic"
             role="button"
             class="btn d-block text-left py-2 px-2 dropdown-toggle"
           >
+            <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
             {{ child.name | abpLocalization }}
           </a>
         </div>

npm/ng-packs/packages/theme-shared/src/lib/contants/styles.ts

@@ -24,6 +24,10 @@ export default `
   top: 18px;
 }
 
+.navbar .dropdown-menu {
+  min-width: 220px;
+}
+
 .modal {
  background-color: rgba(0, 0, 0, .6);
 }