Navigation Menu

<%# Markup for the navigation-menu demo.
    A global nav where each top item opens/closes a sub-panel (a set of links). The
    contents are links and don't use role="menu" (APG Disclosure navigation). The
    library handles syncing aria-expanded, single-open behavior, closing on Escape /
    outside click / focus leaving, and moving between top items with the left/right
    keys. Panel placement and styling are the consumer's CSS (demo.css). %>
<nav class="nav-menu" data-controller="stimeo--navigation-menu"
     aria-label="<%= t("components.navigation_menu.demo.label") %>">
  <ul class="nav-menu__list">
    <li class="nav-menu__item">
      <button
        type="button"
        class="nav-menu__trigger"
        aria-expanded="false"
        aria-controls="nav-menu-products"
        data-stimeo--navigation-menu-target="trigger"
        data-action="click->stimeo--navigation-menu#toggle
                     keydown->stimeo--navigation-menu#onTriggerKeydown">
        <%= t("components.navigation_menu.demo.products.label") %>
      </button>
      <div id="nav-menu-products" class="nav-menu__panel"
           data-stimeo--navigation-menu-target="panel" hidden>
        <a href="#analytics"><%= t(
          "components.navigation_menu.demo.products.links.analytics"
        ) %></a>
        <a href="#automation"><%= t(
          "components.navigation_menu.demo.products.links.automation"
        ) %></a>
        <a href="#reports"><%= t("components.navigation_menu.demo.products.links.reports") %></a>
      </div>
    </li>
    <li class="nav-menu__item">
      <button
        type="button"
        class="nav-menu__trigger"
        aria-expanded="false"
        aria-controls="nav-menu-company"
        data-stimeo--navigation-menu-target="trigger"
        data-action="click->stimeo--navigation-menu#toggle
                     keydown->stimeo--navigation-menu#onTriggerKeydown">
        <%= t("components.navigation_menu.demo.company.label") %>
      </button>
      <div id="nav-menu-company" class="nav-menu__panel"
           data-stimeo--navigation-menu-target="panel" hidden>
        <a href="#about"><%= t("components.navigation_menu.demo.company.links.about") %></a>
        <a href="#careers"><%= t("components.navigation_menu.demo.company.links.careers") %></a>
      </div>
    </li>
  </ul>
</nav>

/*
 * Presentation-only styles for the navigation-menu demo.
 * The library toggles the panel's hidden and the top items' aria-expanded. Panel
 * placement (directly below the trigger) is static and the consumer's CSS
 * responsibility; use stimeo-ui/positioning for dynamic flip.
 */

.nav-menu__list {
  display: flex;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu__item {
  position: relative;
}

.nav-menu__trigger {
  padding: 0.5rem 0.75rem;
  font: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  background: transparent;
  color: var(--color-text);
}

.nav-menu__trigger:hover,
.nav-menu__trigger[aria-expanded="true"] {
  border-color: var(--border-strong);
  background: var(--surface-subtle);
}

.nav-menu__panel {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: 0.375rem;
  box-shadow: 0 8px 24px rgb(15 23 42 / 0.12);
}

.nav-menu__panel[hidden] {
  display: none;
}

.nav-menu__panel a {
  padding: 0.4rem 0.5rem;
  border-radius: 0.25rem;
  color: var(--color-text);
  text-decoration: none;
}

.nav-menu__panel a:hover,
.nav-menu__panel a:focus {
  background: var(--vital-100);
  outline: none;
}