Nav Mobile

<!-- Slideover -->

  <!-- Overlay -->
  <div x-dialog:overlay x-transition.opacity class="fixed inset-0 bg-black bg-opacity-50"></div>

  <!-- Panel -->
  <div class="fixed inset-y-0 right-0 w-full max-w-xs">
    <div
            x-dialog:panel
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="translate-x-full"
            x-transition:enter-end="translate-x-0"
            x-transition:leave="transition ease-in duration-300"
            x-transition:leave-start="translate-x-0"
            x-transition:leave-end="translate-x-full"
            class="h-full w-full"
    >
      <div class="flex h-full flex-col justify-between overflow-y-auto bg-gradient-to-b from-gray-800 to-gray-900 shadow-lg">
        <!-- Close Button -->
        <div class="absolute top-0 right-0 pt-4 pr-4">

          <button type="button" @click="$dialog.close()"
                  class="p-2 inline-flex items-center justify-center text-gray-400 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-gray-600">
            <span class="sr-only">Close menu</span>
            <!-- Heroicon name: outline/x -->
            <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none"
                 viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
                 aria-hidden="true">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M6 18L18 6M6 6l12 12"/>
            </svg>
          </button>

        </div>

        <!-- Body -->
        <div class="p-8">
          <div class="pt-12 space-y-2">


            <a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700"
               href="">
              Our Work
            </a>
            <a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700"
               href="">
              Our Process
            </a>
            <a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700"
               href="">
              About
            </a>
            <a class="block px-4 py-2 rounded-md text-lg font-medium text-gray-100 hover:bg-gray-700"
               href="">
              Contact
            </a>

          </div>

          <div class="mt-8 flex flex-col justify-center">

            <div class="inline-flex">

                            <span x-on:click="openModal = true">
                            <button
                                    class="inline-flex items-center justify-center px-5 py-3 text-base font-medium rounded-md text-white bg-gradient-to-r from-red-500 to-orange-500 hover:bg-gradient-to-l hover:from-blue-500 hover:to-green-600 transition"
                                    onclick="plausible('Schedule a call', {props: {page: '{{ entry.title }}', location: 'navigation', lang: '{{ lang }}'}})"
                            >
                                Schedule a call
                            </button>
                            </span>
            </div>

          </div>

          <div class="mt-12 mb-2 border border-gray-700"></div>

          <div class="py-2">


            <a href=""
               class="group flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">
              <div class="rounded-full bg-gray-300 h-2 w-2"></div>

              <div class="ml-3">
                English
              </div>

            </a>


            <a href=""
               class="group flex items-center px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:bg-gray-700">
              <div class="rounded-full bg-transparent h-2 w-2 group-hover:bg-gray-100 transition"></div>

              <div class="ml-3">
                Français
              </div>

            </a>


          </div>

        </div>

        <div class="mb-12 px-2 py-4">
          <p class="text-center text-gray-300 text-lg italic font-serif">
            <a href="/fr/">
              Nous parlons français!
            </a>
          </p>
        </div>

      </div>
    </div>