When I click on the menu, such as the administration section,
Next, I proceed to click on the toggle button
After clicking, the toggle button becomes activated
Then, I click on the button toggle once more
My issue arises when an empty line <li> is inadvertently added.
How can I remove this unwanted empty line?
dashboard.component.html
<div class="sidebar" [ngClass]="{ active: showSideBar }">
<div class="logo-details">
<span class="logo_name">
<img class="logo_dashboard" src="assets/images/logo_FR.gif" style="border-bottom: 1px solid grey">
</span>
</div>
<ul id="accordion" class="accordion">
<li *ngFor="let menu of menus; let i = index" [class.active]="menu.active">
<ng-container>
<div class="menu" (click)="selectMenu(menu)">
<i [class]="menu.iconClass"></i> {{ menu.name }}
<i class="fa fa-chevron-down"></i>
</div>
<ul class="submenu" #submenu [ngStyle]="{ 'height': menu.active ? submenu.scrollHeight + 'px' : 0 + 'px' }">
<li *ngFor="let submenu of menu.submenu">
<a routerLink="{{ submenu.url }}"> {{ submenu.name }} </a>
</li>
</ul>
</ng-container>
</li>
</ul>
</div>
<section class="home-section">
<nav>
<div class="sidebar-button">
<div class="menu-container">
<i class="bx bx-menu sidebarBtn" (click)="toggleSideBar()"></i>
</div>
<div class="menu-summary-container">
<span class="user">Utilisateur: </span>
<span class="last-connection">La dernière connexion est le :
</span>
</div>
</div>
</nav>
<router-outlet></router-outlet>
</section>
The code can be accessed here.
Thank you for your assistance.