59 lines
1 KiB
Vue
59 lines
1 KiB
Vue
|
<template>
|
||
|
|
<nav class="navigation" v-if="navigation">
|
||
|
|
<NuxtLink
|
||
|
|
v-for="item in navigation"
|
||
|
|
:key="item.id"
|
||
|
|
:to="getNavLink(item)"
|
||
|
|
class="nav-link"
|
||
|
|
>
|
||
|
|
{{ item.label }}
|
||
|
|
</NuxtLink>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
const { getNavigation } = useDirectus()
|
||
|
|
|
||
|
|
const { data: navigation } = await useAsyncData('navigation', () => getNavigation())
|
||
|
|
|
||
|
|
function getNavLink(item: any) {
|
||
|
|
if (item.type === 'custom' && item.custom_route) {
|
||
|
|
return item.custom_route
|
||
|
|
}
|
||
|
|
if (item.type === 'external' && item.external_url) {
|
||
|
|
return item.external_url
|
||
|
|
}
|
||
|
|
if (item.type === 'page' && item.page_id) {
|
||
|
|
return `/${item.page_id}`
|
||
|
|
}
|
||
|
|
return '/'
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.navigation {
|
||
|
|
display: flex;
|
||
|
|
gap: 2rem;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link {
|
||
|
|
color: #4b5563;
|
||
|
|
text-decoration: none;
|
||
|
|
font-weight: 500;
|
||
|
|
transition: color 0.2s;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav-link:hover,
|
||
|
|
.nav-link.router-link-active {
|
||
|
|
color: #3b82f6;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 768px) {
|
||
|
|
.navigation {
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 1rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|