refactor(theme-basic): navigation dropdowns

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

@@ -54,13 +54,20 @@
         [abpVisibility]="childrenContainer"
         class="dropdown-submenu"
         ngbDropdown
-        display="static"
+        [display]="isDropdownChildDynamic ? 'dynamic' : 'static'"
         placement="right-top"
         [abpPermission]="child.requiredPolicy"
       >
-        <a role="button" class="btn d-block text-left py-2 px-2" ngbDropdownToggle>
-          {{ child.name | abpLocalization }}
-        </a>
+        <div ngbDropdownToggle [class.dropdown-toggle]="false">
+          <a
+            abpEllipsis="140px"
+            [abpEllipsisEnabled]="isDropdownChildDynamic"
+            role="button"
+            class="btn d-block text-left py-2 px-2 dropdown-toggle"
+          >
+            {{ child.name | abpLocalization }}
+          </a>
+        </div>
         <div #childrenContainer ngbDropdownMenu class="dropdown-menu dropdown-menu-right">
           <ng-template
             ngFor

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

@@ -8,17 +8,17 @@ import {
   SessionState,
   takeUntilDestroy,
 } from '@abp/ng.core';
-import { Component, TrackByFunction, ViewChild, TemplateRef, AfterViewInit, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, OnDestroy, TemplateRef, TrackByFunction, ViewChild } from '@angular/core';
 import { Navigate, RouterState } from '@ngxs/router-plugin';
 import { Select, Store } from '@ngxs/store';
 import { OAuthService } from 'angular-oauth2-oidc';
-import { Observable } from 'rxjs';
-import { map, distinctUntilChanged, delay, filter } from 'rxjs/operators';
+import compare from 'just-compare';
+import { Observable, fromEvent } from 'rxjs';
+import { filter, map, debounceTime } from 'rxjs/operators';
 import snq from 'snq';
 import { LayoutAddNavigationElement } from '../../actions';
-import { LayoutState } from '../../states';
 import { Layout } from '../../models/layout';
-import compare from 'just-compare';
+import { LayoutState } from '../../states';
 
 @Component({
   selector: 'abp-layout-application',
@@ -50,6 +50,8 @@ export class LayoutApplicationComponent implements AfterViewInit, OnDestroy {
 
   isOpenProfile: boolean = false;
 
+  isDropdownChildDynamic: boolean;
+
   get visibleRoutes$(): Observable<ABP.FullRoute[]> {
     return this.routes$.pipe(map(routes => getVisibleRoutes(routes)));
   }
@@ -81,6 +83,13 @@ export class LayoutApplicationComponent implements AfterViewInit, OnDestroy {
 
   constructor(private store: Store, private oauthService: OAuthService) {}
 
+  private checkWindowWidth() {
+    setTimeout(() => {
+      if (window.innerWidth < 768) this.isDropdownChildDynamic = false;
+      else this.isDropdownChildDynamic = true;
+    }, 0);
+  }
+
   ngAfterViewInit() {
     const navigations = this.store.selectSnapshot(LayoutState.getNavigationElements).map(({ name }) => name);
 
@@ -102,6 +111,17 @@ export class LayoutApplicationComponent implements AfterViewInit, OnDestroy {
       .subscribe(elements => {
         setTimeout(() => (this.rightPartElements = elements), 0);
       });
+
+    this.checkWindowWidth();
+
+    fromEvent(window, 'resize')
+      .pipe(
+        takeUntilDestroy(this),
+        debounceTime(350),
+      )
+      .subscribe(() => {
+        this.checkWindowWidth();
+      });
   }
 
   ngOnDestroy() {}