<div
  id="menu-overlay"
  class="fixed inset-0 bg-black/50 backdrop-blur opacity-0 invisible transition-all duration-200 z-40"
  @click="closeMenu()"
>
  <div
    class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform translate-x-full transition-transform duration-300 z-50"
    @click.stop
    x-ref="menuPanel"
  >
    <!-- Close button -->
    <div class="flex items-center justify-between p-6 border-b border-border">
      <span class="font-bold text-lg text-accent font-oxanium">Menu</span>
      <button
        @click="closeMenu()"
        aria-label="{{ i18n "closeMenu" }}"
        class="p-2 hover:bg-surface rounded transition-colors"
      >
        <i data-feather="x" class="w-5 h-5"></i>
      </button>
    </div>

    <!-- Menu items -->
    <nav class="p-6">
      {{ range .Site.Menus.main }}
        <a
          href="{{ .URL }}"
          class="block py-4 text-lg font-medium hover:text-accent transition-colors border-b border-border/30"
        >
          {{ i18n .Name }}
        </a>
      {{ end }}
    </nav>

    <!-- Divider -->
    <div class="border-t border-border/30 mx-6"></div>

    <!-- Language switcher -->
    <div class="p-6">
      <div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div>
      <div class="flex gap-2">
        {{ range .Site.Languages }}
          {{ $current := eq . $.Page.Language }}
          <a
            data-lang-switch="{{ .Lang }}"
            href="{{ .LanguagePrefix }}"
            class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}"
          >
            {{ .LanguageName }}
          </a>
        {{ end }}
      </div>
    </div>

    <!-- Theme toggle -->
    <div class="p-6 border-t border-border/30">
      <button
        id="theme-toggle"
        @click="closeMenu()"
        class="w-full py-3 px-4 bg-surface hover:bg-surface/80 rounded flex items-center justify-center gap-2 transition-colors"
      >
        <i data-feather="moon" class="w-4 h-4"></i>
        <span>{{ i18n "toggleTheme" }}</span>
      </button>
    </div>
  </div>
</div>

