Every time I click on "Portfolio", the arrow points downwards.
https://i.sstatic.net/Gwf5F.png
However, when a submenu appears, the arrow changes to point upwards.
https://i.sstatic.net/kFdjr.png
If I click on "Portfolio" again, the arrow remains pointed upwards.
Typically, the arrow should be pointing downwards.
https://i.sstatic.net/dcHmj.png
I am confused about how to address this issue?
admin.component.html
<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 }}"
*ngIf="selectedTab !== menu.route"
style="position: absolute; right: 20px; "
></i>
<i
class="{{ menu.arrowUp }}"
*ngIf="selectedTab === menu.route"
style="position: absolute; right: 20px; "
></i>
</a>
</li>
admin.component.ts
export class AdminComponent implements OnInit {
selectedTab: string;
showSubmenu: any[] = [];
showInfo: any[] = [];
menus: any[] = [
/* Market */
{
class: 'bx bx-grid-alt',
item: 'Market',
route: 'market',
arrowDown: 'bx bx-chevron-down',
arrowUp: 'bx bx-chevron-up',
submenus: [
{
class: 'bx bx-box',
item: 'Item',
route: 'item',
},
],
},
/* Currency */
{
class: 'bx bx-grid-alt',
item: 'Currency',
route: 'currency',
},
/* Portfolio */
{
class: 'bx bx-box',
item: 'Portfolio',
route: 'portfolio',
arrowDown: 'bx bx-chevron-down',
arrowUp: 'bx bx-chevron-up',
submenus: [
{
class: 'bx bx-grid-alt',
item: 'Element',
route: 'element',
},
],
},
];
constructor() {}
ngOnInit() {}
toggleMenu(index: number) {
this.showSubmenu[index] = !this.showSubmenu[index];
}
toggleSubmenu(event: MouseEvent, item: string) {
event.stopPropagation();
this.showInfo[item] = !this.showInfo[item];
}
}
I have provided the code on Stackblitz for reference.
Thank you for your assistance in clarifying this issue.