<!-- components/PageTree.vue -->
<script setup>
const { data: pages } = await useAsyncData('nav', () =>
  queryCollectionNavigation('content')
)
</script>

<template>
  <nav>
    <h2>Índice</h2>
    <TreeNode :nodes="pages" />
  </nav>
</template>

<style lang="scss" scoped>
nav {
  box-shadow: var(--shadow-elevation-medium);
    background-color: var(--bg-sidebar);

    h2 {
      padding: 20px;
    }
}
</style>