hugo/layouts/partials/layouts/search/results.html

<div
  class="fixed inset-0 overflow-hidden z-20"
  :class="{'fixed': open}"
  aria-label="Search docs"
  role="dialog"
  aria-modal="true"
  @keydown.right="$focus.next()"
  @keydown.left="$focus.previous()"
  @keydown.esc="open=false"
  x-cloak>
  <div class="absolute inset-0 overflow-hidden z-20" x-show="open">
    <div class="absolute inset-0" aria-hidden="true"></div>

    <div
      class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10"
      @click.outside="open = false">
      <div
        class="pointer-events-auto w-screen max-w-md"
        x-show="open"
        x-transition:enter="transform transition ease-in-out duration-300 sm:duration-500"
        x-transition:enter-start="translate-x-full"
        x-transition:enter-end="translate-x-0"
        x-transition:leave="transform transition ease-in-out duration-300 sm:duration-500"
        x-transition:leave-start="translate-x-0"
        x-transition:leave-end="translate-x-full">
        <div
          class="flex h-full flex-col overflow-y-scroll dark:bg-blue-950/96 bg-white py-6 shadow-sm dark:shadow-gray-800">
          <div class="px-4 sm:px-6">
            <div class="flex items-start justify-between">
              <input
                x-model.debounce.100ms="query"
                @click="search()"
                type="search"
                arial-label="Search"
                class="text-gray-800 dark:text-gray-100 bg-white/40 dark:bg-gray-900 shadow rounded border-0 p-3 w-full"
                placeholder="Search docs"
                x-ref="input">
            </div>
          </div>
          <div class="relative mt-6 flex-1 px-4 sm:px-6 h-full">
            <ul
              role="list"
              class="divide-y divide-gray-200 dark:divide-gray-900 h-[calc(100%-6rem)] overflow-y-auto">
              <template
                x-for="[group, entries] in Object.entries(result)"
                :key="group">
                <li class="py-4">
                  <div
                    class="mb-1 dark:text-gray-300 font-semibold uppercase tracking-widest text-sm"
                    x-text="group"></div>
                  <template x-for="entry in entries" :key="entry.objectID">
                    <a
                      class="flex flex-nowrap space-x-4 py-2 text-sm leading-5 text-gray-900 dark:text-gray-500 hover:dark:text-gray-800 hover:bg-gray-50 dark:hover:bg-gray-500 focus:outline-none focus:bg-gray-50 dark:focus:bg-gray-800 cursor-pointer transition duration-150 ease-in-out"
                      :href="entry.url">
                      <span
                        class="w-1/3 text-xs text-right text-gray-500 dark:text-gray-300"
                        x-text="entry.hierarchy.lvl1">
                      </span>
                      <div class="w-2/3">
                        <h3
                          class="text-md font-bold"
                          x-html="entry.getHeadingHTML()"></h3>
                        <template
                          x-if="entry._snippetResult && entry._snippetResult.content">
                          <div class="two-lines-ellipsis mt-1">
                            <span>…</span>
                            <span x-html="entry._snippetResult.content.value">
                            </span>
                            <span>…</span>
                          </div>
                        </template>
                      </div>
                    </a>
                  </template>
                </li>
              </template>
            </ul>
          </div>
          {{/* End listing */ -}}
        </div>
      </div>
      <div
        class="z-40 fixed pointer-events-auto bottom-0 right-0 dark:text-gray-300 text-gray-800 float-right mr-8 mb-4 text-sm lg:text-md"
        x-show="open"
        x-transition.opacity.duration.800ms>
        {{ partial "layouts/search/algolialogo.html" }}
      </div>
    </div>
  </div>
</div>