<script setup lang="ts">
const route = useRoute();
const project = computed(() => parseInt(route.params.projectId as string));

const { data: navigation, refresh } = await useLazyFetch(() => `/api/project/${project.value}/navigation`, { immediate: false });
if(!isNaN(project.value))
{
    await refresh();
}

const emit = defineEmits(['navigate']);
</script>

<template>
    <div class="relative flex-auto">
        <div class="absolute top-0 bottom-0 left-0 right-0 overflow-auto xl:px-4 px-2">
            <NavigationLink @navigate="e => emit('navigate')" class="ps-2" v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
        </div>
    </div>
</template>