{# @description A navigation bar whose entries open large panels, rendered as a navigation landmark. On small screens it collapses behind a Menu button. Fill the default slot with megamenu.item components, up to daisyUI's limit of ten items. The id is required and has no default, so set it to site-menu in the playground, the id the example items point at. #}
{# @prop id:text | required | description:"Id of the megamenu, used by the Menu button to open it and by each item to build its panel id." #}
{# @prop wide:boolean | description:"Make the panels as wide as the megamenu's content." #}
{# @prop full:boolean | description:"Make the panels as wide as the page." #}
{# @prop size:select['xs','sm','md','lg','xl'] | description:"Size of the megamenu." #}
{# @prop class:text | description:"Extra classes added to the megamenu." #}
{# @prop aria-label:text | description:"Accessible name of the megamenu. Defaults to a translated Site." #}
{# @slot <c-megamenu.item megamenu="site-menu" key="products" text="Products"><c-menu><c-menu.item href="#" text="Overview" /><c-menu.item href="#" text="Pricing" /></c-menu></c-megamenu.item><c-megamenu.item megamenu="site-menu" key="docs" text="Docs"><c-menu><c-menu.item href="#" text="Guides" /><c-menu.item href="#" text="Reference" /></c-menu></c-megamenu.item><c-megamenu.item megamenu="site-menu" key="company" text="Company"><c-menu><c-menu.item href="#" text="About" /><c-menu.item href="#" text="Contact" /></c-menu></c-megamenu.item> — The megamenu's items, as megamenu.item components. Each item's megamenu is this megamenu's id. #}
{% load daisy_cotton i18n %}
<c-vars id wide full size class aria-label />
<c-button class="sm:hidden" type="button" popovertarget="{{ id }}" text="{% trans "Menu" %}" only />
<nav id="{{ id }}"
     popover
     class="megamenu max-sm:megamenu-vertical{% if wide %} megamenu-wide{% endif %}{% if full %} megamenu-full{% endif %} {% variation size "megamenu" "xs,sm,md,lg,xl" %} {{ class }}"
     aria-label="{% if aria_label %}{{ aria_label }}{% else %}{% trans "Site" %}{% endif %}"
     {{ attrs }}>
  <span class="megamenu-active"></span>
  {{ slot }}
</nav>