Issue Description: Upon hovering over a navigation item, the dropdown container is displayed but it's not clickable.
Desired Behavior: Hovering over a navigation item should display the dropdown container and allow clicking on its contents. Furthermore, when moving away from the navigation item and dropdown container, the container should be hidden.
To access the StackBlitz code example, click on this link
HTML:
<div class="flex-container">
<div *ngFor="let item of navigations">
<ng-container *ngIf="item.type == 'dropdown'">
<div
class="dropdown p-0"
(mouseenter)="showDropdown(item)"
(mouseleave)="hideDropdown(item)"
>
<a
class="cs-link-white dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
{{ item.menuTitle }}
</a>
</div>
</ng-container>
<ng-container *ngIf="item.type == 'link'">
<div>
<a class="cs-link-white" href="#">{{ item.menuTitle }}</a>
</div>
</ng-container>
</div>
</div>
<div
*ngIf="activeMenu"
style="height: 200px; width: 100%; background-color: #c8c8c8;"
class="dropdown-menu"
[class.show]="isDropdownOpen[activeMenu.menuCode]"
>
<div>
Hello from {{ activeMenu.menuCode }}
<button (click)="triggerAction()">Button</button>
</div>
</div>
CSS:
.flex-container {
background-color: #2f333a;
display: flex;
align-items: center;
}
.cs-link-white {
display: flex;
color: white;
text-decoration: none;
font-family: inherit;
-webkit-box-align: center;
align-items: center;
padding: 0 15px;
min-height: 44px;
letter-spacing: 0.2px;
font-size: 14px;
font-weight: 500;
font-style: normal;
line-height: normal;
}
.show {
display: block;
}
TypeScript Code:
import { CommonModule } from '@angular/common';
import { Component } from '@angular/core';
interface NavigationItem {
menuTitle: string;
menuCode: string;
type: 'dropdown' | 'link';
}
@Component({
selector: 'app-navigation',
templateUrl: './navigation.component.html',
styleUrls: ['./navigation.component.css'],
standalone: true,
imports: [CommonModule],
})
export class NavigationComponent {
activeMenu!: NavigationItem;
isDropdownOpen: any = {
dropdown1: false,
dropdown2: false,
dropdown3: false,
};
navigations: NavigationItem[] = [
{
menuTitle: 'Dropdown 1',
menuCode: 'dropdown1',
type: 'dropdown',
},
{
menuTitle: 'Dropdown 2',
menuCode: 'dropdown2',
type: 'dropdown',
},
{
menuTitle: 'Dropdown 3',
menuCode: 'dropdown3',
type: 'dropdown',
},
{
menuTitle: 'Link1',
menuCode: 'link1',
type: 'link',
},
{
menuTitle: 'Link2',
menuCode: 'link2',
type: 'link',
},
};
constructor() {}
showDropdown(item: NavigationItem) {
this.activeMenu = item;
this.isDropdownOpen[item.menuCode] = true;
}
hideDropdown(item: NavigationItem) {
this.activeMenu = item;
this.isDropdownOpen[item.menuCode] = false;
}
triggerAction() {
console.log('button clicked');
}
}