UI: tighten menu-service + menu-toggle wiring after menu-models reshape

ui-ngx/src/app/core/services/menu.models.ts

@@ -32,6 +32,7 @@ export interface MenuSection {
   rootOnly?: boolean;
   isNew?: boolean;
   customTranslate?: boolean;
+  active?: boolean;
 }
 
 export interface MenuReference {
@@ -1008,7 +1009,8 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
               {id: MenuId.trendz_settings},
               {id: MenuId.ai_models}
             ]
-          }
+          },
+          {id: MenuId.api_usage}
         ]
       },
       {
@@ -1024,8 +1026,7 @@ const defaultUserMenuMap = new Map<Authority, MenuReference[]>([
           {id: MenuId.mobile_bundles},
           {id: MenuId.mobile_apps}
         ]
-      },
-      {id: MenuId.api_usage},
+      }
     ]
   ],
   [

ui-ngx/src/app/core/services/menu.service.ts

@@ -38,8 +38,6 @@ export class MenuService {
     map((items) => this.allMenuLinks(items))
   );
 
-  private currentMenuSection: MenuSection = null;
-
   constructor(private store: Store<AppState>,
               private router: Router) {
     this.store.pipe(select(selectIsAuthenticated)).subscribe(
@@ -55,7 +53,7 @@ export class MenuService {
       }
     );
     this.router.events.pipe(filter(event => event instanceof ActivationEnd)).subscribe(() => {
-        this.updateCurrentMenuSection();
+        this.updateActiveMenuSections();
     });
   }
 
@@ -65,7 +63,7 @@ export class MenuService {
         if (authState.authUser) {
           this.currentMenuSections = buildUserMenu(authState);
           this._availableMenuSections = this.allMenuSections(this.currentMenuSections);
-          this.updateCurrentMenuSection();
+          this.updateActiveMenuSections();
           this.updateOpenedMenuSections();
           this.menuSections$.next(this.currentMenuSections);
           this.availableMenuSections$.next(this._availableMenuSections);
@@ -80,7 +78,7 @@ export class MenuService {
     const openedMenuSections = getCurrentOpenedMenuSections(this.store);
     if (this.currentMenuSections?.length) {
       this.currentMenuSections.filter(section => section.type === 'toggle' &&
-        (openedMenuSections.includes(section.path) || this.isActiveMenuSection(section))).forEach(
+        (openedMenuSections.includes(section.path) || section.active)).forEach(
         section => section.opened = true
       );
     }
@@ -118,17 +116,20 @@ export class MenuService {
     return this.homeSections$;
   }
 
-  private updateCurrentMenuSection() {
+  private updateActiveMenuSections() {
     const url = this.router.url;
-    this.currentMenuSection = this._availableMenuSections.find(section => section.path === url);
+    const activeMenuSection = this._availableMenuSections.find(section => section.path === url);
+    this._availableMenuSections.forEach((section: MenuSection) => {
+      section.active = this.isSectionActive(section, activeMenuSection);
+    });
   }
 
-  public isActiveMenuSection(section: MenuSection): boolean {
-    if (this.currentMenuSection === section) {
+  private isSectionActive(section: MenuSection, activeMenuSection: MenuSection): boolean {
+    if (activeMenuSection === section) {
       return true;
     } else if (section.pages?.length) {
       for (const page of section.pages) {
-        if (this.isActiveMenuSection(page)) {
+        if (this.isSectionActive(page, activeMenuSection)) {
           return true;
         }
       }

ui-ngx/src/app/modules/home/menu/menu-toggle.component.ts

@@ -20,7 +20,6 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { ActionPreferencesUpdateOpenedMenuSection } from '@core/auth/auth.actions';
 import { coerceBoolean } from '@shared/decorators/coercion';
-import { MenuService } from '@core/services/menu.service';
 
 @Component({
     selector: 'tb-menu-toggle',
@@ -37,8 +36,7 @@ export class MenuToggleComponent {
   @coerceBoolean()
   collapsed = false;
 
-  constructor(private store: Store<AppState>,
-              private menuService: MenuService) {
+  constructor(private store: Store<AppState>) {
   }
 
   sectionHeight(): string {
@@ -64,7 +62,7 @@ export class MenuToggleComponent {
 
   toggleSectionActive(): boolean {
     if (this.collapsed) {
-      return this.menuService.isActiveMenuSection(this.section);
+      return this.section.active;
     } else {
       return false;
     }