Mega Dropdown

{% set dropDownId = heading | lower | replace(" ", "-") %}

<div id="second-level-menu-{{dropDownId}}" class="js-second-level-panel invisible lg:invisible z-50 transition-transform duration-300 bg-white absolute translate-x-full w-full h-full top-0 lg:top-full left-0 lg:pt-7 lg:overflow-y-visible lg:bg-transparent lg:h-auto lg:-translate-y-7 lg:opacity-0 lg:translate-x-0 lg:transition-none lg:z-40 lg:data-[open]:visible lg:data-[open]:opacity-100">
    <div class="overflow-y-auto lg:overflow-visible h-full lg:[[data-nav-theme='contrast']_&]:border-t lg:[[data-nav-theme='contrast']_&]:border-t-grey-200">
        <div class="max-lg:container">
            <div class="h-full lg:h-auto z-20 lg:relative lg:bg-white">
                <div class="h-full lg:h-auto lg:container lg:py-12">
                    <button class="js-mobile-second-level-trigger-back w-full lg:hidden bg-white py-4 flex items-center text-nav-fg" aria-controls="second-level-menu-{{dropDownId}}" aria-expanded="false">
                        <div class="w-5 h-5 mr-3">
                            {% render "@icon", { name: "icon-chevron", modifier: 'w-full h-full fill-current text-nav-arrow transform rotate-90', ariaHidden: true } %}
                        </div>
                        <div class="font-semibold text-3xl bg-white text-nav-fg lg:hidden hover:underline">
                            {{ heading }}
                        </div>
                    </button>
                    <div class="pt-6 lg:pt-0 space-y-4 lg:space-y-0 lg:grid lg:grid-cols-12 lg:gap-12 border-t border-t-grey-200 lg:border-0">
                        {% for megaItem in megaList %}
                            {% render "@" + megaItem.component, megaItem.data %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>