<div class="card-toolbar">
 <!--begin::Menu-->
 <button
 type="button"
 class="btn btn-sm btn-icon btn-color-primary btn-active-light-primary"
 data-kt-menu-trigger="hover"
 data-kt-menu-placement="bottom-end"
 data-kt-menu-attach="parent"
 >
 <i class="ki-duotone ki-category fs-6">
 <span class="path1"></span>
 <span class="path2"></span>
 <span class="path3"></span>
 <span class="path4"></span>
 </i>
 </button>

 <!--begin::Menu 1-->
 <div class="menu menu-column menu-rounded menu-sub menu-sub-dropdown w-200px menu-state-bg-light-primary menu-gray-800" data-kt-menu="true">
 @for(item of menuItems;track item.dic_entity_id){
 <div class="menu-item px-3" data-kt-menu-trigger="hover" data-kt-menu-placement="right-start">

 <!--begin::Menu item-->
 <a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
 <span class="menu-title">{{ item.dic_translation }}</span>
 @if(item.dic_value?.length > 0) {
 <span class="menu-arrow"></span>
 }
 </a>
 <!--end::Menu item-->

 <!--begin::Menu sub-->
 <div class="menu-sub menu-sub-dropdown w-175px py-4">
 @for (event of item.dic_value; track event.event_id){
 <!--begin::Menu item-->
 <div class="menu-item px-3">
 <a href="#%22%20class=%22menu-link%20px-3" target="_blank" rel="noopener noreferrer">
 <span class="menu-icon" data-kt-element="icon">
 <img [src]="event.icon_path" class="w-20px"/> 
 </span>
 <span class="menu-title"> {{ event.event_name }}</span>
 </a>
 </div>
 <!--end::Menu item-->
 }
 </div>
 <!--end::Menu sub-->
 </div>
 }
 <!--end::Menu item-->
 </div>
 <!--end::Menu 1-->
 <!--end::Menu-->
 </div>
 </div>