<main
      class="relative mx-auto max-w-4xl bg-gray-200 h-screen"
      x-data="{
              isMobile: (()=> !window.matchMedia('(min-width: 576px)').matches)(),
              users: [
                  {id: 1, name: 'John Bob', email: '[email protected]'},
                  {id: 2, name: 'Joan Bab', email: '[email protected]'},
                  {id: 3, name: 'Jib Jab', email: '[email protected]'},
                  ],
              }"
      x-init="window.addEventListener('resize', () => isMobile = !window.matchMedia('(min-width: 576px)').matches);"
      @keydown.escape="open = false"
>
  <nav class="p-4 bg-indigo-700 text-indigo-100">
    <div>Alpine Portal</div>
    <div class="text-xs text-indigo-400 font-thin">
      Alpine.js 3 + TailwindCSS 2
    </div>
  </nav>

  <section class="flex flex-wrap p-4">
    <div
         class="mx-auto p-2 border"
         :class="{ 'bg-red-100 border-red-500 text-red-800': isMobile, 'bg-green-100 border-green-500 text-green-800': !isMobile }"
         x-html="isMobile ? 'mobile' : 'desktop'"></div>
    
    <table class="w-full">
      <thead>
        <tr class="border-b">
          <th class="p-2 text-left">Name</th>
          <th class="p-2 text-left">Email</th>
          <th class="p-2 text-right"></th>
        </tr>
      </thead>
      <tbody class="bg-white">
        <template x-for="user in users" :key="user.id">
          <tr class="border-b border-gray-200 hover:bg-yellow-100">
            <td class="p-2 text-left flex flex-col" x-text="user.name"></td>
            <td class="p-2 text-left" x-text="user.email"></td>
            <td class="px-2 text-right" x-data="{ open: false }">
              <button
                      type="button"
                      title="Open the actions menu"
                      class="font-mono text-2xl px-2"
                      @click="open = true"
                      :class="{ 'bg-gray-300': open }"
              >
                &ctdot;
              </button>

              <!-- Mobile menu -->
              <template x-portal="mobile">
                <ul
                    x-show="open && isMobile"
                    x-cloak
                    @click.away="open = false"
                    class="bottom-0 border bg-white shadow-md text-left">
                  <li
                      class="p-2 bg-gray-500 text-white"
                      x-text="user.name"></li>
                  <li class="p-2 hover:bg-gray-200">📲 Call</li>
                  <li class="p-2 hover:bg-gray-200">✏ Edit</li>
                  <li class="p-2 hover:bg-gray-200">❌ Delete</li>
                  <li class="p-2 hover:bg-gray-200">🦄 Other action</li>
                </ul>
              </template>

              <!-- Desktop menu -->
              <ul
                  x-show="open && !isMobile"
                  x-cloak
                  @click.away="open = false"
                  class="absolute w-48 border bg-white shadow-md text-left -ml-24">
                <li
                    class="p-2 bg-gray-500 text-white"
                    x-text="user.name"></li>
                <li class="p-2 hover:bg-gray-200">✏ Edit</li>
                <li class="p-2 hover:bg-gray-200">❌ Delete</li>
                <li class="p-2 hover:bg-gray-200">🦄 Other action</li>
              </ul>

            </td>
          </tr>
        </template>
      </tbody>
    </table>
    
    <p class="mx-2 my-4 italic">On mobile viewports (Tailwind sm) render the menu in a portal at the bottom of the screen.</p>
    
    <p class="mx-2 my-4">Caleb changed the API from <code>x-portal</code> to <code>x-teleport</code> and added it to the core. I made a new demo using <a class="text-blue-600 underline" href="https://codepen.io/brbcoding-the-selector/pen/ExwaMbV?editors=1000">x-teleport</a>.</p>

  </section>

  <nav class="fixed bottom-0 inset-x-0">
    <template x-portal-target="mobile" @click="open = false"> </template>
  </nav>
</main>