Tailwind 4 nav

nav.vto

<!-- ===== top-nav.vto TEMPLATE START ===== -->
<header
  class="pointer-events-none relative z-50 flex flex-none flex-col"
>
  <div class="order-last mt-[calc(--spacing(16)-(--spacing(3)))]"></div>
  <div
    class="top-0 order-last -mb-3 pt-3 sm:px-8"
  >
    <div class="mx-auto w-full max-w-7xl lg:px-8">
      <div class="relative px-4 sm:px-8 lg:px-12">
        <div class="mx-auto max-w-2xl lg:max-w-5xl">
          <div
            class="top-(--avatar-top,--spacing(3)) w-full"
          >
            <div class="relative">
              <a
                aria-label="Home"
                class="pointer-events-auto block origin-left"
                href="/"
                ><img
                  id="large-logo"
                  alt="eSolia full size logo with dark blue text and transparent background"
                  loading="lazy"
                  fetchpriority="high"
                  decoding="async"
                  class="w-64 object-cover dark:grayscale dark:invert dark:saturate-[.1] transition-opacity duration-300"
                  src="/assets/logo_horiz_darkblue_bgtransparent_2.svg"
              /></a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="top-0 z-10 h-16 pt-6">
    <div
      class="top-(--header-top,--spacing(6)) w-full sm:px-8 fixed"
    >
      <div class="mx-auto w-full max-w-7xl lg:px-8">
        <div class="relative px-4 sm:px-8 lg:px-12">
          <div class="mx-auto max-w-2xl lg:max-w-5xl">
            <div class="relative flex gap-4">
              <div class="flex flex-1">
              <a
                aria-label="Home"
                class="pointer-events-auto block origin-left"
                href="/"
                ><img
                  id="small-logo" 
                  alt="eSolia symbol logo with dark blue text and transparent background"
                  loading="lazy"
                  fetchpriority="high"
                  decoding="async"
                  class="w-12 object-cover rounded-md bg-white/90 dark:bg-white/10 dark:grayscale dark:invert dark:saturate-[.1] opacity-0 transition-opacity duration-300"
                  src="/assets/symbol_darkblue_bgtransparent_2.svg"
              /></a>
              </div>
              <div class="flex flex-1 justify-end md:justify-center">
                <div class="pointer-events-auto md:hidden relative">
                  <button
                    aria-label="Toggle menu" 
                    class="group flex items-center rounded-full bg-white/90 px-4 py-2 text-sm font-medium text-zinc-800 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10 dark:hover:ring-white/20"
                    type="button"
                    x-data @click="$dispatch('toggle-menu')"
                  >
                    <span>Menu</span><svg
                      viewBox="0 0 8 6"
                      aria-hidden="true"
                      class="ml-3 h-auto w-2 stroke-zinc-500 group-hover:stroke-zinc-700 dark:group-hover:stroke-zinc-400"
                    >
                      <path
                        d="M1.75 1.75 4 4.25l2.25-2.5"
                        fill="none"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      ></path>
                    </svg>
                  </button>
                </div>
                <div
                  hidden=""
                  style="
                    position: fixed;
                    top: 1px;
                    left: 1px;
                    width: 1px;
                    height: 0;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border-width: 0;
                    display: none;
                  "
                ></div>
                <nav
                  class="pointer-events-auto hidden md:block">
                  <ul 
                    class="flex rounded-full bg-white/90 px-3 text-sm font-medium text-zinc-800 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm dark:bg-zinc-800/90 dark:text-zinc-200 dark:ring-white/10"
                  >
                    {{- for item of it.topnav.links }}
                    <li>
                      <a 
                        class="relative block whitespace-nowrap px-3 py-2 transition hover:text-teal-500 dark:hover:text-teal-400" href="{{ item.href }}"
                        {{- if item.target }}target="{{ item.target }}"{{ /if }} >{{ item.text }}</a
                      >
                    </li>
                    {{ /for -}}
                  </ul>
                </nav>

                <nav class="pointer-events-auto md:hidden" x-data="{ open: false, zIndex: 0 }">
                  <button type="button" class="mobile-menu-btn text-xl" x-on:click="open=!open; zIndex = open ? 100 : 0" x-on:toggle-menu.window="open = !open; zIndex = open ? 100 : 0" x-show="open" x-cloak>
                      <img class="h-12 w-12 fill-amber-400 dark:fill-amber-300" src="{{ "x" |> icon("phosphor") }}" inline />
                  </button>
                  <div class="mobile-menu" x-bind:class="{'is-active' : open }" :style="{ zIndex: zIndex }">
                      <div class="text-5xl mobile-menu__item"><a
                      class="link dim white f3 f1-l dib"
                      href="/"
                      title="{{ i18n.home.sitename }}"
                    ><span class="font-thin">{{ "Top" |> toUpperCase }}</span></a></div>
                      <div class="text-5xl mobile-menu__item"><a
                      class="link dim white f3 f2-m f1-l dib"
                      href="/about"
                      title="test"
                    ><span class="font-thin">{{ "About" |> toUpperCase }}</span></a></div>
                  </div>
                  </nav>


              </div>
              <div class="flex justify-end md:flex-1 z-50">
                {{ if alternates && alternates.length > 1 }}
                <div class="pointer-events-auto z-50">
                  <button
                      type="button"
                      aria-label="Toggle language"
                      class="group rounded-full bg-white/90 px-3 py-2 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20 z-50 text-sm font-medium text-zinc-800 dark:text-zinc-200 dark:group-hover:text-zinc-100"
                    >
                    
                    {{- for alt of alternates }}{{ if alt.lang !== lang }}
                    <a href="{{ alt.url }}" title="{{ alt.title |> escape }}">
                      {{ if alt.lang == "ja" }}日本語{{ else }}English{{ /if }}
                    </a>
                    {{ /if }}{{ /for }}
                    </button>
                  </div>
                  {{ /if }}
                <div class="pointer-events-auto z-50" x-data="themeToggle" :class="{ 'dark': darkMode }">
                
                  <button
                    type="button"
                    aria-label="Toggle theme"
                    class="group rounded-full bg-white/90 px-3 py-2 ring-1 shadow-lg shadow-zinc-800/5 ring-zinc-900/5 backdrop-blur-sm transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20 z-50"
                    @click="darkMode = !darkMode">
                    <span x-show="!darkMode">
                      <img class="h-5 w-5 fill-amber-300 stroke-amber-500 transition group-hover:fill-amber-400 group-hover:stroke-amber-700 " src="{{ "sun" |> icon("phosphor", "duotone") }}" inline />
                    </span><span x-show="darkMode">
                      <img class="h-5 w-5 fill-teal-300 stroke-teal-500 transition group-hover:fill-teal-400 group-hover:stroke-teal-700 " src="{{ "moon-stars" |> icon("phosphor", "duotone") }}" inline />
                    </span>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>
<!-- ===== top-nav.vto TEMPLATE END ===== -->