index/components/blocks/SwipeControls.vue

38 lines
982 B
Vue

<script setup lang="ts">
const { pages } = storeToRefs(usePageStore())
const route = useRoute()
const state = computed(() => {
const i = pages.value.indexOf(
pages.value.find(
(page) => page.path === '/' + route.fullPath.split('/')[1],
)!,
)
return {
current: route.fullPath,
index: i,
next: toRaw(pages.value)[(i + 1) % pages.value.length].path,
prev: toRaw(pages.value)[i - 1 < 0 ? pages.value.length - (i + 1) : i - 1]
.path,
}
})
</script>
<template>
<div
class="flex fixed flex-row justify-between items-center w-full h-full pass-through"
>
<NuxtLink
class="opacity-25 hover:opacity-100 text-inherit no-underline transition-all"
:to="state.prev"
>
<iconify-icon icon="iconoir:nav-arrow-left" inline />
</NuxtLink>
<NuxtLink class="control-icon text-inherit no-underline" :to="state.next">
<iconify-icon icon="iconoir:nav-arrow-right" inline />
</NuxtLink>
</div>
</template>