113 lines
3.1 KiB
Vue
113 lines
3.1 KiB
Vue
<template>
|
|
<div>
|
|
<button
|
|
@click="isOpen = true"
|
|
class="p-2 hover:bg-gray-100 rounded"
|
|
aria-label="Open menu"
|
|
>
|
|
<svg class="w-6 h-6" 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>
|