{#
/**
 * Navbar Component
 * 
 * Responsive navigation bar with mobile toggle.
 */
#}

{% set expand_bp = expand|default('md') %}
{% set bg = bg_color|default('primary') %}

<nav class="bg-{{ bg }} text-body-bg" x-data="{ mobileMenuOpen: false }">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between h-16">
      <div class="flex items-center">
        {% block brand %}
          {{ brand }}
        {% endblock %}
      </div>

      <!-- Desktop Navigation -->
      <div class="hidden {{ expand_bp }}:flex {{ expand_bp }}:items-center {{ expand_bp }}:space-x-4">
        {% block navigation %}
          {{ navigation }}
        {% endblock %}
      </div>

      <div class="hidden {{ expand_bp }}:flex {{ expand_bp }}:items-center">
        {% block actions %}
          {{ actions }}
        {% endblock %}
      </div>

      <!-- Mobile menu button -->
      <div class="flex items-center {{ expand_bp }}:hidden">
        <button
          type="button"
          @click="mobileMenuOpen = !mobileMenuOpen"
          class="inline-flex items-center justify-center p-2 hover:bg-opacity-75 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-white"
          aria-expanded="false"
        >
          <span class="sr-only">Open main menu</span>
          <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
          </svg>
        </button>
      </div>
    </div>
  </div>

  <!-- Mobile menu -->
  <div x-show="mobileMenuOpen" x-cloak class="{{ expand_bp }}:hidden">
    <div class="px-2 pt-2 pb-3 space-y-1">
      {{ navigation }}
    </div>
    <div class="pt-4 pb-3 border-t border-gray-700">
      {{ actions }}
    </div>
  </div>
</nav>

