Merge pull request #5323 from abpframework/refactor/5160

Hid the menu dropdown when clicking a navigation

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

@@ -60,7 +60,7 @@
 
   <ng-template #defaultChild let-child>
     <div class="dropdown-submenu" *abpPermission="child.requiredPolicy">
-      <a 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
       >

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,11 +16,20 @@ import { Component, Input, TrackByFunction } from '@angular/core';
 export class RoutesComponent {
   @Input() smallScreen: boolean;
 
+  @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);
+    });
+  }
 }