{% comment %} Fomantic's responsive nav collapse is its Sidebar/Dropdown *JS* module, which
   cf-ui does not load. `ui stackable menu` is Fomantic's CSS-only equivalent:
   below 768px the menu becomes a full-width column, so nothing is hidden that a
   burger would have to reveal. The toggle is kept because `cfNavbar` is the
   cross-theme contract — it reports its state through `aria-expanded` and
   Fomantic's `active` item class rather than through a display utility that
this framework does not ship. {% endcomment %}
<nav
  class="ui stackable menu {{ class }}"
  role="navigation"
  aria-label="main navigation"
  x-data="cfNavbar"
>
  <div class="header item">{{ brand }}</div>
  <button
    type="button"
    class="item"
    aria-label="menu"
    :aria-expanded="menuOpen"
    :class="{ 'active': menuOpen }"
    @click="toggle()"
  >&#9776;</button>
  <div class="item">{{ start }}</div>
  <div class="right menu">
    <div class="item">{{ end }}</div>
  </div>
</nav>