There are two main headings in my menu: Administration and Market
https://i.sstatic.net/JbePq.png
When I click on the Administration heading, submenus for Portfolio and Corporate Action are displayed
https://i.sstatic.net/oyabv.png
The issue I am facing is that if I then try to open the Market section, the Administration submenu remains visible.
https://i.sstatic.net/Df95M.png
I want to ensure that only one menu can be open at a time.
<ul class="nav-links" *ngFor="let menu of menus; let i = index">
<li [ngClass]="{ selected: selectedTab === menu.route }">
<a routerLink="{{ menu.route }}" routerLinkActive="active" (click)="toggleMenu(i); selectedTab = menu.route">
<i class="{{ menu.class }}"></i>
<span class="links_name"> {{ menu.item }} </span>
<i class="{{ menu.arrowDown }} iconArrow" *ngIf="selectedTab !== menu.route || !showSubmenu[i]"></i>
<i class="{{ menu.arrowUp }} iconArrow " *ngIf="selectedTab === menu.route && showSubmenu[i]"></i>
</a>
</li>
<ng-container *ngFor="let submenu of menu.submenus; let j = index">
<li *ngIf="showSubmenu[i]">
<a routerLink="{{ submenu.route }}">
<i class="{{ submenu.class }}"></i>
<span class="links_name"> {{ submenu.item }} </span>
</a>
</li>
</ng-container>
</ul>
and
export class DashboardComponent implements OnInit {
selectedTab: string;
showSubmenu: any[] = [];
menus: any[] = [
/* Administration */
{
class: 'bx bx-lock-alt',
item: 'Administration',
route: '/dashboard/administration',
arrowDown: 'bx bx-chevron-down',
arrowUp: 'bx bx-chevron-up',
submenus: [{
class: 'bx bx-key',
item: 'Portfolio',
route: '/administration/portfolio',
},
{
class: 'bx bx-wallet',
item: 'Corporate Action',
route: '/administration/corporate-action',
},
],
},
/* Market */
{
class: 'bx bx-chart',
item: 'Market',
route: '/dashboard/market',
arrowDown: 'bx bx-chevron-down',
arrowUp: 'bx bx-chevron-up',
submenus: [{
class: 'bx bx-coin-stack',
item: 'Value',
route: '/market/value',
},
{
class: 'bx bx-line-chart',
item: 'Indice',
route: '/market/indice',
},
],
},
];
constructor() {}
ngOnInit() {}
toggleMenu(index: number) {
this.showSubmenu[index] = !this.showSubmenu[index];
}
}
You can find the complete code here