@props(['menuId', 'fitMenu' => false])

<div x-data x-show="$store.mega.isOpen('{{ $menuId }}')" x-transition.origin.top x-cloak
  id="mega-menu-{{ $menuId }}"
  @mouseenter="$store.mega.show('{{ $menuId }}')"
  @mouseleave="$store.mega.hide()"
  @class([
      'absolute left-0 right-0 top-full z-50 w-auto container megamenu-container px-0 flex backdrop-blur-lg',
  ])>
  <div class="megamenu megamenu-gradient grid grid-cols-1 gap-0 md:grid-cols-3 shadow-xl flex-grow">
    {{ $slot }}
  </div>
</div>