Utilizing Angular CLI version 8.3.0, I aim to construct a sidebar featuring a drop-down menu. My objective is to apply the "open" class to toggle the opening of the drop-down section. However, the current challenge I am encountering is that when I click to open a drop-down menu, all drop-downs are triggered to open simultaneously. What I desire is for only the clicked drop-down to open. Furthermore, I would like the currently opened drop-down to close automatically if I click on another menu item to open a different drop-down.
Below is the component.html markup:
<li class="nav__item"
(click)="toggleShowDiv('divA')"
>
<a target="_self">
<mat-icon svgIcon="ic-corp-setup"></mat-icon>
<span class="nav__text">Corp setup</span>
</a>
<ul class="nav-sub divA" [@slideInOut]="animationState">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
</ul>
</li>
<li class="nav__item"
(click)="toggleShowDiv('divB')"
>
<a target="_self">
<mat-icon svgIcon="ic-corp-setup"></mat-icon>
<span class="nav__text">Corp setup</span>
</a>
<ul class="nav-sub divB" [@slideInOut]="animationState">
<li><a href="">Menu 1</a></li>
<li><a href="">Menu 2</a></li>
<li><a href="">Menu 3</a></li>
</ul>
Within my component.ts file:
animationState = 'in';
toggleShowDiv(divName: string) {
if (divName === 'divA') {
console.log(this.animationState);
this.animationState = this.animationState === 'out' ? 'in' : 'out';
console.log(this.animationState);
}
}
Here's an excerpt from animations.ts:
import {
trigger, state, style, transition,
animate, group, query, stagger, keyframes
} from '@angular/animations';
export const SlideInOutAnimation = [
trigger('slideInOut', [
state('in', style({
'max-height': '500px', 'opacity': '1', 'visibility': 'visible'
})),
state('out', style({
'max-height': '0px', 'opacity': '0', 'visibility': 'hidden'
})),
transition('in => out', [group([
animate('400ms ease-in-out', style({
'opacity': '0'
})),
animate('600ms ease-in-out', style({
'max-height': '0px'
})),
animate('700ms ease-in-out', style({
'visibility': 'hidden'
}))
])]),
transition('out => in', [group([
animate('1ms ease-in-out', style({
'visibility': 'visible'
})),
animate('600ms ease-in-out', style({
'max-height': '500px'
})),
animate('800ms ease-in-out', style({
'opacity': '1'
}))
])])
]),
]
I do not wish to rely on classes such as "divA" or "divB" as I intend to create a dynamic menu system.
While suggestions within this context are encouraged, I remain receptive to alternative solutions. Any assistance provided is greatly valued.