Hello,
I'm currently encountering an issue with the sidebar menu functionality in the latest versions of our application.

I've implemented the presentation of menu-items recursively, with the data sourced from the server side. However, when I open a sub-menu and click on an item within that menu, the main menu's sub-menu fails to collapse back. Essentially, subsequent clicks on the main menu have no effect, and the sub-menu remains stuck in the expanded state.

I noticed in the changelog of Metronic v8.1.9 - 6 July, 2023, there was a fix for "Fix sidebar collapse and expand issue." Could this issue be related to any recent updates in classes or functionalities within the latest versions ?

Looking forward to your assistance.

Thank you,

<pre lang ="html">
<!--begin::Menu wrapper-->
<div
id="kt_app_sidebar_menu_scroll"
class="scroll-y my-5 mx-3"
data-kt-scroll="true"
data-kt-scroll-activate="true"
data-kt-scroll-height="auto"
data-kt-scroll-dependencies="#kt_app_sidebar_logo, #kt_app_sidebar_footer"
data-kt-scroll-wrappers="#kt_app_sidebar_menu"
data-kt-scroll-offset="5px"
data-kt-scroll-save-state="true"
>
<!--begin::Menu-->
<div
class="menu menu-column menu-rounded menu-sub-indention fw-semibold fs-6"
id="#kt_app_sidebar_menu"
data-kt-menu="true"
data-kt-menu-expand="false"
>
<!-- Modules -->
<ng-container *ngFor="let child of menuItems$ | async">
<ng-container *ngIf="child.separetor_name">
<ng-container [ngTemplateOutlet]="menuItemSeparatorTemplate" [ngTemplateOutletContext]="{ item: child }"></ng-container>
</ng-container>

<ng-container *ngIf="child.children.length > 0">
<ng-container
[ngTemplateOutlet]="menuItemSectionTemplate"
[ngTemplateOutletContext]="{ item: child, children: child.children }"
></ng-container>
</ng-container>

<ng-container *ngIf="child.children.length === 0">
<ng-container [ngTemplateOutlet]="menuItemTemplate" [ngTemplateOutletContext]="{ item: child }"></ng-container>
</ng-container>
</ng-container>

<!-- Define template for menu item -->
<ng-template #menuItemTemplate let-item="item">
<div class="menu-item">
<a class="menu-link without-sub" (click)="onMenuItemClicked(item)" routerLinkActive="active">
<span class="menu-icon" *ngIf="item.icon_name">
<span [inlineSVG]="'./assets/media/icons/duotune/' + item.icon_name + '.svg'" class="svg-icon svg-icon-2"></span> </span
><span class="menu-title"
>{{ item.dic_translation }}
<span class="badge badge-light-{{ item.badge_color_parm }} fw-semibold fs-8 px-2 ms-2" *ngIf="item.badge_type_translation">{{
item.badge_type_translation
}}</span></span
>
</a>
</div>
</ng-template>

<!-- Define templaate for menu item separator -->
<ng-template #menuItemSeparatorTemplate let-item="item">
<div class="menu-item">
<div class="menu-content pt-8 pb-2">
<span class="menu-section text-muted text-uppercase fs-8 ls-1">{{ item.separetor_name }}</span>
</div>
</div>
</ng-template>

<!-- Define template for menu item section with sub-menus -->
<ng-template #menuItemSectionTemplate let-item="item" let-children="children">
<div class="menu-item menu-accordion" data-kt-menu-trigger="click" routerLinkActive="here show">
<span class="menu-link">
<!-- <span class="menu-icon">
<app-keenicon [name]="item.icon" class="fs-2"></app-keenicon>
</span> -->
<span class="menu-icon" *ngIf="item.icon_name">
<span [inlineSVG]="'./assets/media/icons/duotune/' + item.icon_name + '.svg'" class="svg-icon svg-icon-2"></span> </span
><span class="menu-title"
>{{ item.dic_translation }}
<span class="badge badge-light-{{ item.badge_color_parm }} fw-semibold fs-8 px-2 ms-2" *ngIf="item.badge_type_translation">{{
item.badge_type_translation
}}</span></span
>
<span class="menu-arrow"></span>
</span>
<div class="menu-sub menu-sub-accordion" routerLinkActive="menu-active-bg">
<ng-container *ngFor="let child of children">
<ng-container *ngIf="child.separetor_name">
<ng-container [ngTemplateOutlet]="menuItemSeparatorTemplate" [ngTemplateOutletContext]="{ item: child }"></ng-container>
</ng-container>

<ng-container *ngIf="child.children.length > 0">
<ng-container
[ngTemplateOutlet]="menuItemSectionTemplate"
[ngTemplateOutletContext]="{ item: child, children: child.children }"
></ng-container>
</ng-container>

<ng-container
*ngIf="child.children.length == 0"
[ngTemplateOutlet]="menuItemInnerTemplate"
[ngTemplateOutletContext]="{ item: child, children: child.children }"
></ng-container>
</ng-container>
</div>
</div>
</ng-template>

<!-- Inner item inside sub menu -->
<ng-template #menuItemInnerTemplate let-item="item" let-children="children">
<div class="menu-item">
<a class="menu-link without-sub" (click)="onMenuItemClicked(item)" routerLinkActive="active"
><span class="menu-bullet"><span class="bullet bullet-dot"></span></span
><span class="menu-title"
>{{ item.dic_translation }}
<span class="badge badge-light-{{ item.badge_color_parm }} fw-semibold fs-8 px-2 ms-2" *ngIf="item.badge_type_translation">{{
item.badge_type_translation
}}</span></span
>
</a>
</div>
</ng-template>
</div>
</div>

</pre>