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

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

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