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

<template>
    <div :class="{'desktop-hidden': !$route.path.startsWith('/explorer')}" 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">
                            <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text desktop-hidden" aria-label="Systeme" :href="'/explorer'"
                                :class="{'mod-active': $route.path.startsWith('/explorer')}">Systeme</NuxtLink>
                            <ContentNavigation v-slot="{ navigation }" queryContent="/">
                                <NavigationLink :class="{'hidden': !$route.path.startsWith('/explorer')}" v-if="!!navigation" v-for="link of navigation.filter(e => !['/tags', '/'].includes(e?._path ?? ''))" :link="link" />
                            </ContentNavigation>
                            <NuxtLink @click="hideLeftPanel" class="site-nav-bar-text desktop-hidden" aria-label="Outils" :href="'/tools'"
                                :class="{'mod-active': $route.path.startsWith('/tools')}">Outils</NuxtLink>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>