<!-- Semmet Angular: Navigation Menu (Disclosure) — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/ -->
<!--
Usage from a parent component template:
Import <%= classify(name) %> in that parent component.

<<%= selector %> label="Principal" />
-->
<!-- Deliberately avoids the ARIA menu/menuitem roles — APG reserves those for app-style menus. -->
<nav [attr.aria-label]="label()">
  <ul>
    <li><a [href]="homeHref()">{{ homeLabel() }}</a></li>
    <li>
      <button
        type="button"
        [attr.aria-expanded]="expanded()"
        [attr.aria-controls]="instanceId + '-submenu'"
        [id]="instanceId + '-button'"
        (click)="toggleSubmenu()"
      >
        {{ submenuLabel() }}
      </button>
      <ul [id]="instanceId + '-submenu'" [attr.aria-labelledby]="instanceId + '-button'" [hidden]="!expanded()">
        @for (link of submenuLinks(); track link.href) {
          <li><a [href]="link.href">{{ link.label }}</a></li>
        }
      </ul>
    </li>
  </ul>
</nav>
