<template>
  <div>
    <button 
      @click="isOpen = true" 
      class="flex-shrink-0 hover:bg-gray-100 rounded mt-2"
      aria-label="Open menu"
    >
      <svg class="w-7 h-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
      </svg>
    </button>

    <Transition name="slide">
      <div v-if="isOpen" class="fixed inset-0 z-50">
        <div class="absolute inset-0 bg-black/50" @click="isOpen = false"></div>
        
        <div class="absolute left-0 top-0 h-full w-64 bg-white shadow-lg p-6 pt-16">
          <nav class="space-y-4">
            <NuxtLink to="/" class="block text-xl hover:underline" @click="isOpen = false">
              michael winter
            </NuxtLink>
            
            <div>
              <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Works</p>
              <div class="space-y-2 ml-2">
                <NuxtLink 
                  to="/pieces" 
                  class="block hover:underline"
                  @click="isOpen = false"
                >
                  pieces
                </NuxtLink>
                <NuxtLink 
                  to="/writings" 
                  class="block hover:underline"
                  @click="isOpen = false"
                >
                  writings
                </NuxtLink>
                <NuxtLink 
                  to="/albums" 
                  class="block hover:underline"
                  @click="isOpen = false"
                >
                  albums
                </NuxtLink>
              </div>
            </div>

            <div>
              <p class="text-xs text-gray-400 uppercase tracking-wider mb-2">Events</p>
              <div class="space-y-2 ml-2">
                <NuxtLink 
                  to="/performances" 
                  class="block hover:underline"
                  @click="isOpen = false"
                >
                  performances
                </NuxtLink>
                <NuxtLink 
                  to="/lectures" 
                  class="block hover:underline"
                  @click="isOpen = false"
                >
                  lectures
                </NuxtLink>
              </div>
            </div>
            
            <NuxtLink 
              to="/about" 
              class="block hover:underline"
              @click="isOpen = false"
            >
              about
            </NuxtLink>
            
            <a 
              href="https://unboundedpress.org/code" 
              target="_blank" 
              class="block hover:underline"
              @click="isOpen = false"
            >
              code
            </a>
          </nav>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup>
const isOpen = ref(false)

const route = useRoute()
watch(() => route.path, () => {
  isOpen.value = false
})
</script>

<style scoped>
.slide-enter-active,
.slide-leave-active {
  transition: opacity 0.2s ease;
}

.slide-enter-from,
.slide-leave-to {
  opacity: 0;
}
</style>
