62 lines
1.3 KiB
Vue
62 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
|
|
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)!,
|
|
)
|
|
|
|
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">
|
|
<FontAwesomeIcon icon="fa-solid fa-angle-left" fixed-width />
|
|
</NuxtLink>
|
|
|
|
<NuxtLink class="control-icon no-decoration" :to="state.next">
|
|
<FontAwesomeIcon icon="fa-solid fa-angle-right" fixed-width />
|
|
</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>
|