{% set pages = craft.entries.section('pages').level(1).all() %}
{% set navItems = [
    { label: 'Home',       url: '' },
    { label: 'Projects',   url: 'projects' },
    { label: 'Properties', url: 'properties' },
    { label: 'Journal',    url: 'journal' },
    { label: 'Expertise',  url: 'expertise/rosengart-expertise' },
    { label: 'About',      url: 'about' },
    { label: 'Press',      url: 'press' }
] %}

<style>
  .navbar-inner { position: relative; }
  @media (min-width: 768px) { .nav-desktop { display: flex !important; } .nav-hamburger { display: none !important; } }
  @media (max-width: 767px) { .nav-desktop { display: none !important; } .nav-hamburger { display: block !important; } }
</style>

{# relative retiré du nav interne — c'est navbar-inner qui sert d'ancre #}
<nav x-data="{ open: false }" class="flex items-center">

  {# ── Desktop ── #}
  <ul class="nav-desktop hidden items-center gap-9 ml-4 list-none m-0 p-0">
    {% for item in navItems %}
      {% set isActive = craft.app.request.pathInfo == item.url %}
      <li>
        <a href="/{{ item.url }}" class="nav-link {{ isActive ? 'active' : '' }}">
          {{ item.label }}
        </a>
      </li>
    {% endfor %}
    {% for page in pages %}
      {% set isActive = segment1 == page.slug %}
      <li>
        <a href="{{ page.url }}"
           class="nav-link {{ isActive ? 'active' : '' }}"
           {{ isActive ? 'aria-current="page"' }}>
          {{ page.title }}
        </a>
      </li>
    {% endfor %}
  </ul>

  {# ── Hamburger ── #}
  <button
    @click="open = !open"
    :aria-expanded="open.toString()"
    aria-label="Toggle menu"
    class="nav-hamburger hidden p-2 bg-transparent border-0 cursor-pointer">
    <svg class="w-6 h-6" fill="none" stroke="white" viewBox="0 0 24 24">
      <path x-show="!open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"/>
      <path x-show="open" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 18L18 6M6 6l12 12"/>
    </svg>
  </button>

  {# ── Dropdown mobile : ancré sur navbar-inner grâce au relative ci-dessus ── #}
  <ul
    x-show="open"
    x-transition
    x-cloak
    class="absolute top-full left-0 w-full flex flex-col gap-2 py-4 px-4 list-none m-0 bg-black/90 z-50">
    {% for item in navItems %}
      {% set isActive = craft.app.request.pathInfo == item.url %}
      <li>
        <a href="/{{ item.url }}"
           class="nav-link {{ isActive ? 'active' : '' }} block py-2"
           @click="open = false">
          {{ item.label }}
        </a>
      </li>
    {% endfor %}
    {% for page in pages %}
      {% set isActive = segment1 == page.slug %}
      <li>
        <a href="{{ page.url }}"
           class="nav-link {{ isActive ? 'active' : '' }} block py-2"
           @click="open = false"
           {{ isActive ? 'aria-current="page"' }}>
          {{ page.title }}
        </a>
      </li>
    {% endfor %}
  </ul>

</nav>