refactor: add closeDropdown method and remove navigating variable

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

@@ -8,7 +8,7 @@
 
   <ng-template #defaultLink let-route>
     <li class="nav-item" *abpPermission="route.requiredPolicy">
-      <a (click)="navigating = true" class="nav-link" [routerLink]="[route.path]"
+      <a class="nav-link" [routerLink]="[route.path]"
         ><i *ngIf="route.iconClass" [ngClass]="route.iconClass"></i>
         {{ route.name | abpLocalization }}</a
       >
@@ -60,7 +60,7 @@
 
   <ng-template #defaultChild let-child>
     <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
-      <a (click)="navigating = true" class="dropdown-item" [routerLink]="[child.path]">
+      <a class="dropdown-item" [routerLink]="[child.path]" (click)="closeDropdown()">
         <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
         {{ child.name | abpLocalization }}</a
       >
@@ -91,7 +91,6 @@
         #childrenContainer
         class="dropdown-menu border-0 shadow-sm"
         [class.d-block]="smallScreen && dropdownSubmenu.isOpen()"
-        [class.d-none]="navigating"
       >
         <ng-container *ngTemplateOutlet="forTemplate; context: { $implicit: child }"></ng-container>
       </div>

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

@@ -1,5 +1,13 @@
 import { ABP, RoutesService, TreeNode } from '@abp/ng.core';
-import { Component, Input, TrackByFunction } from '@angular/core';
+import {
+  Component,
+  ElementRef,
+  Input,
+  QueryList,
+  Renderer2,
+  TrackByFunction,
+  ViewChildren,
+} from '@angular/core';
 
 @Component({
   selector: 'abp-routes',
@@ -8,20 +16,20 @@ import { Component, Input, TrackByFunction } from '@angular/core';
 export class RoutesComponent {
   @Input() smallScreen: boolean;
 
-  private _navigating = false;
-  set navigating(value: boolean) {
-    this._navigating = true;
-    setTimeout(() => (this._navigating = false), 0);
-  }
-  get navigating(): boolean {
-    return this._navigating;
-  }
+  @ViewChildren('childrenContainer') childrenContainers: QueryList<ElementRef<HTMLDivElement>>;
 
   trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
 
-  constructor(public readonly routes: RoutesService) {}
+  constructor(public readonly routes: RoutesService, protected renderer: Renderer2) {}
 
   isDropdown(node: TreeNode<ABP.Route>) {
     return !node?.isLeaf || this.routes.hasChildren(node.name);
   }
+
+  closeDropdown() {
+    this.childrenContainers.forEach(({ nativeElement }) => {
+      this.renderer.addClass(nativeElement, 'd-none');
+      setTimeout(() => this.renderer.removeClass(nativeElement, 'd-none'), 0);
+    });
+  }
 }