<script setup lang="ts">
function hideLeftPanel(_: Event)
{
    document?.querySelector('.published-container')?.classList.remove('is-left-column-open');
}

const route = useRoute();
const showing = ref(false);

const project = computed(() => parseInt(Array.isArray(route.params.projectId) ? '0' : route.params.projectId));

const { data: navigation, execute, status, error } = await useFetch(() => `/api/project/${project.value}/navigation`, {
    immediate: false,
});

if(route.params.projectId &&  project.value !== 0)
{
    showing.value = true;
    execute();
}
else
{
    showing.value = false;
}
</script>

<template>
    <div :class="{'desktop-hidden': !showing}" class="site-body-left-column">
        <div class="site-body-left-column-inner">
            <div class="nav-view-outer">
                <div class="nav-view">
                    <div class="tree-item">
                        <div class="tree-item-children">
                            <NavigationLink v-if="!!navigation" v-for="link of navigation" :project="project" :link="link" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>