<script lang="ts">
let icon: HTMLDivElement | null;
function toggleLeftPanel(_: Event): void {
  document.querySelector('.published-container')?.classList.toggle('is-left-column-open');
}
</script>

<script setup lang="ts">
const { data: tags } = await useAsyncData('descriptions', queryContent('/tags').findOne);

provide('tags/descriptions', tags);

onMounted(() => {
  icon = document.querySelector('.site-nav-bar .clickable-icon');
  icon?.removeEventListener('click', toggleLeftPanel);
  icon?.addEventListener('click', toggleLeftPanel);
})
</script>

<template>
  <div class="published-container print has-navigation has-outline">
    <div class="site-nav-bar">
      <div>
        <div class="clickable-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="svg-icon lucide-menu">
                <line x1="4" y1="12" x2="20" y2="12"></line>
                <line x1="4" y1="6" x2="20" y2="6"></line>
                <line x1="4" y1="18" x2="20" y2="18"></line>
            </svg>
        </div>
        <div class="gap-3">
          <NuxtLink class="site-nav-bar-text" aria-label="Accueil" :href="'/'">Accueil</NuxtLink>
          <NuxtLink class="site-nav-bar-text" aria-label="Systeme" :href="'/explorer'">Systeme</NuxtLink>
          <NuxtLink class="site-nav-bar-text" aria-label="Outils" :href="'/tools'">Outils</NuxtLink>
        </div>
      </div>
      <div>
        <SearchView />
      </div>
      <div class="ps-1">
        <ThemeSwitch />
      </div>
    </div>
    <div class="site-body">
      <NuxtPage />
    </div>
  </div>
</template>
