Summer Sale – Use code oxbow20 at checkout for a 20% discount.

oxbow ui

flyouts

1 
<div
  class="relative"
  x-data="{
        uid: Math.random().toString(36).slice(2),
        open: false,
        style: '',
        gap: 8,
        align() {
          const btn = this.$refs.btn;
          if (!btn) return;
          const r = btn.getBoundingClientRect();
          // Center under button, clamp within viewport a bit
          const cx  = r.left + r.width / 2;
          const top = r.bottom + this.gap;
          this.style = `position:fixed; left:${cx}px; top:${top}px; transform:translateX(-50%);`;
        },
        toggle() {
          if (this.open) { this.open = false; return; }
          window.dispatchEvent(new CustomEvent('close-all-flyouts', { detail: this.uid }));
          this.align();                       // compute coords first
          requestAnimationFrame(() => this.open = true); // then show (no jitter)
        },
        close() { this.open = false; }
      }"
  x-init="
        // Close when another flyout opens
        window.addEventListener('close-all-flyouts', (e) => { if (e.detail !== uid) open = false });
        // Keep position synced while open
        const realign = () => { if (open) align() };
        window.addEventListener('resize', realign);
        window.addEventListener('scroll', realign, { passive: true });
      "
>
  <button
    class="flex items-center justify-center text-center font-medium duration-500 ease-in-out transition-colors focus:outline-2 focus:z-10 select-none text-zinc-500 bg-white outline outline-zinc-200 hover:text-blue-600 hover:bg-zinc-50 focus:outline-blue-500 shadow-sm h-9 px-4 py-2 text-sm gap-4 rounded-tl-md rounded-tr-md rounded-bl-md rounded-br-md"
    x-ref="btn"
    @click.stop="toggle"
    aria-expanded="false"
  >
    <span>Help Center</span>
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
      class="icon icon-tabler-chevron-down size-4"
      slot="right-icon"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M6 9l6 6l6 -6"></path>
    </svg>
  </button>
  <!-- Backdrop -->
  <div
    x-show="open"
    x-transition.opacity
    class="fixed inset-0 z-[999]"
    @click="close"
    style="display: none"
  ></div>
  <!-- Teleported dropdown (no clipping) -->
  <template x-teleport="body">
    <div
      x-show="open"
      :style="style"
      class="z-[1000]"
      style="display: none"
      @keydown.escape.window="close"
      x-transition:enter="transition ease-out duration-200"
      x-transition:enter-start="opacity-0 translate-y-1"
      x-transition:enter-end="opacity-100 translate-y-0"
      x-transition:leave="transition ease-in duration-150"
      x-transition:leave-start="opacity-100 translate-y-0"
      x-transition:leave-end="opacity-0 translate-y-1"
    >
      <div class="max-w-max">
        <div
          class="w-screen max-w-xs p-4 bg-white shadow-lg rounded-3xl ring-1 ring-zinc-900/5"
        >
          <div>
            <a
              class="text-sm relative flex items-center w-full p-4 gap-2 group rounded-xl hover:bg-zinc-50"
              href="#_"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-arrow-refresh size-5 group-hover:text-blue-500"
                slot="left-icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M20 11a8.1 8.1 0 0 0 -15.5 -2m-.5 -4v4h4"></path>
                <path d="M4 13a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"></path>
              </svg>
              <h3
                class="text-base font-medium text-zinc-900 group-hover:text-blue-500"
              >
                Sync across devices
              </h3>
            </a>
            <a
              class="text-sm relative flex items-center w-full p-4 gap-2 group rounded-xl hover:bg-zinc-50"
              href="#_"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-external-file-dots size-5 group-hover:text-blue-500"
                slot="left-icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                <path
                  d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"
                ></path>
                <path d="M9 14v.01"></path>
                <path d="M12 14v.01"></path>
                <path d="M15 14v.01"></path>
              </svg>
              <h3
                class="text-base font-medium text-zinc-900 group-hover:text-blue-500"
              >
                Create custom documents
              </h3>
            </a>
            <a
              class="text-sm relative flex items-center w-full p-4 gap-2 group rounded-xl hover:bg-zinc-50"
              href="#_"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-external-edit size-5 group-hover:text-blue-500"
                slot="left-icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M7 7h-1a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-1"
                ></path>
                <path
                  d="M20.385 6.585a2.1 2.1 0 0 0 -2.97 -2.97l-8.415 8.385v3h3l8.385 -8.415z"
                ></path>
                <path d="M16 5l3 3"></path>
              </svg>
              <h3
                class="text-base font-medium text-zinc-900 group-hover:text-blue-500"
              >
                Edit your files
              </h3>
            </a>
            <a
              class="text-sm relative flex items-center w-full p-4 gap-2 group rounded-xl hover:bg-zinc-50"
              href="#_"
            >
              <svg
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon icon-tabler-external-brain size-5 group-hover:text-blue-500"
                slot="left-icon"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                <path
                  d="M15.5 13a3.5 3.5 0 0 0 -3.5 3.5v1a3.5 3.5 0 0 0 7 0v-1.8"
                ></path>
                <path
                  d="M8.5 13a3.5 3.5 0 0 1 3.5 3.5v1a3.5 3.5 0 0 1 -7 0v-1.8"
                ></path>
                <path d="M17.5 16a3.5 3.5 0 0 0 0 -7h-.5"></path>
                <path d="M19 9.3v-2.8a3.5 3.5 0 0 0 -7 0"></path>
                <path d="M6.5 16a3.5 3.5 0 0 1 0 -7h.5"></path>
                <path d="M5 9.3v-2.8a3.5 3.5 0 0 1 7 0v10"></path>
              </svg>
              <h3
                class="text-base font-medium text-zinc-900 group-hover:text-blue-500"
              >
                Edit your files
              </h3>
            </a>
          </div>
        </div>
      </div>
    </div>
  </template>
</div>
2
3
4
5
6
7
8
9
10