How can I add animation to opening and closing menu items in my project? I am not sure if it can be done in Angular or CSS. I have provided a reproduction of the project for reference => Stackblitz.
HTML file
<div class="wrapper">
<!-- Top Menu -->
<div class="sidebar">
<!-- Menu Item -->
<ul>
<li
*ngFor="let menu of menus; let i = index"
[class.active]="menu.active"
>
<ng-container>
<a class="item" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</a>
<ul *ngIf="menu.active">
<li *ngFor="let submenu of menu.submenu" class="submenu">{{submenu.name}}</li>
</ul>
</ng-container>
</li>
</ul>
</div>
</div>