63 lines
1.2 KiB
Vue
63 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { storeToRefs } from 'pinia'
|
|
import { usePageStore } from '~/stores/pages'
|
|
|
|
const pageStore = usePageStore()
|
|
const { pages } = storeToRefs(pageStore)
|
|
|
|
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="control-layout pass-through">
|
|
<NuxtLink class="control-icon no-decoration" :to="state.prev">
|
|
<Icon name="iconoir:nav-arrow-left" />
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="control-icon no-decoration" :to="state.next">
|
|
<Icon name="iconoir:nav-arrow-right" />
|
|
</NuxtLink>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.control {
|
|
&-layout {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
position: fixed;
|
|
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-icon {
|
|
opacity: 0.25;
|
|
transition: 0.15s ease;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
</style>
|