feature(theme-shared): add loader bar color input

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

@@ -100,9 +100,7 @@ function flatRoutes(routes: ABP.FullRoute[]): ABP.FullRoute[] {
     return r.reduce((acc, val) => {
       let value: ABP.FullRoute[] = [val];
       if (val.children) {
-        const { children } = val;
-        delete val.children;
-        value = [val, ...flat(children)];
+        value = [val, ...flat(val.children)];
       }
 
       return [...acc, ...value];

npm/ng-packs/packages/setting-management/src/lib/services/setting-management.service.ts

@@ -1,11 +1,10 @@
 import { SettingTab } from '@abp/ng.theme.shared';
 import { Injectable } from '@angular/core';
-import { Router, RouteConfigLoadEnd, NavigationEnd } from '@angular/router';
+import { RouteConfigLoadEnd, Router } from '@angular/router';
 import { Navigate } from '@ngxs/router-plugin';
 import { Store } from '@ngxs/store';
-import { filter } from 'rxjs/operators';
-import { takeUntilDestroy } from '@abp/ng.core';
-import { Subscription, timer } from 'rxjs';
+import { Subject, Subscription, timer } from 'rxjs';
+import { filter, takeUntil } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class SettingManagementService {
@@ -13,22 +12,29 @@ export class SettingManagementService {
 
   selected = {} as SettingTab;
 
+  private destroy$ = new Subject();
+
   constructor(private router: Router, private store: Store) {
     let timeout: Subscription;
     this.router.events
       .pipe(
         filter(event => event instanceof RouteConfigLoadEnd),
-        takeUntilDestroy(this),
+        takeUntil(this.destroy$),
       )
       .subscribe(event => {
-        if (timeout) timeout.unsubscribe();
+        if (timeout) {
+          timeout.unsubscribe();
+          this.destroy$.next();
+        }
         timeout = timer(150).subscribe(() => {
           this.setSettings();
         });
       });
   }
 
-  ngOnDestroy() {}
+  ngOnDestroy() {
+    this.destroy$.next();
+  }
 
   setSettings() {
     setTimeout(() => {

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.scss

@@ -12,8 +12,6 @@
   }
 
   .abp-progress {
-    background: #77b6ff;
-    box-shadow: 0 0 10px rgba(119, 182, 255, 0.7);
     height: 2px;
     left: 0;
     position: fixed;

npm/ng-packs/packages/theme-shared/src/lib/components/loader-bar/loader-bar.component.ts

@@ -9,7 +9,14 @@ import { filter } from 'rxjs/operators';
   selector: 'abp-loader-bar',
   template: `
     <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
-      <div [ngClass]="progressClass" [style.width.vw]="progressLevel"></div>
+      <div
+        class="abp-progress"
+        [style.width.vw]="progressLevel"
+        [ngStyle]="{
+          'background-color': color,
+          'box-shadow': boxShadow
+        }"
+      ></div>
     </div>
   `,
   styleUrls: ['./loader-bar.component.scss'],
@@ -19,7 +26,7 @@ export class LoaderBarComponent implements OnDestroy {
   containerClass: string = 'abp-loader-bar';
 
   @Input()
-  progressClass: string = 'abp-progress';
+  color: string = '#77b6ff';
 
   @Input()
   isLoading: boolean = false;
@@ -31,6 +38,10 @@ export class LoaderBarComponent implements OnDestroy {
 
   interval: any;
 
+  get boxShadow(): string {
+    return `0 0 10px rgba(${this.color}, 0.5)`;
+  }
+
   constructor(private actions: Actions, private router: Router) {
     actions
       .pipe(