<div class="topbar-item d-none d-md-flex">
  <div ngbDropdown class="dropdown">
    <button
      ngbDropdownToggle
      class="topbar-link btn shadow-none btn-link px-2 dropdown-toggle drop-arrow-none show"
    >
      Mega Menu
      <ng-icon name="tablerChevronDown" class="ms-1" />
    </button>
    <div ngbDropdownMenu class="dropdown-menu dropdown-menu-xxl p-0">
      <div class="h-100" style="max-height: 380px" data-simplebar>
        <div class="row g-0">
          @for (item of megaMenuItems; track i;let i = $index) {
          <div class="col-md-4">
            <div class="p-3">
              <h5 class="fw-semibold fs-sm dropdown-header">
                {{ item.title }}
              </h5>
              <ul class="list-unstyled megamenu-list">
                @for (link of item.links; track i;let i = $index) {
                <li>
                  <a [routerLink]="link.url" class="dropdown-item"
                    >{{ link.label }}</a
                  >
                </li>
                }
              </ul>
            </div>
          </div>
          }
        </div>
      </div>
    </div>
  </div>
</div>
