refactor: add navigating boolean variable to routes.component

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 class="nav-link" [routerLink]="[route.path]"
+      <a (click)="navigating = true" 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 class="dropdown-item" [routerLink]="[child.path]">
+      <a (click)="navigating = true" class="dropdown-item" [routerLink]="[child.path]">
         <i *ngIf="child.iconClass" [ngClass]="child.iconClass"></i>
         {{ child.name | abpLocalization }}</a
       >
@@ -91,6 +91,7 @@
         #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

@@ -8,6 +8,15 @@ 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;
+  }
+
   trackByFn: TrackByFunction<TreeNode<ABP.Route>> = (_, item) => item.name;
 
   constructor(public readonly routes: RoutesService) {}