HeaderNav.vueをコンポーネント方式に変更

components/HeaderNav.vue

@@ -1,15 +1,16 @@
-<script setup lang="ts">
-const { data: navigation } = await useAsyncData("navigation", () =>
-  fetchContentNavigation(),
-);
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <ul>
-    <li v-for="link of navigation" :key="link._path">
-      <NuxtLink :to="link._path" class="link">{{ link.title }}</NuxtLink>
-    </li>
-  </ul>
+  <ContentNavigation>
+    <template #default="{ navigation }">
+      <ul>
+        <li v-for="link of navigation" :key="link._path">
+          <NuxtLink :to="link._path" class="link">{{ link.title }}</NuxtLink>
+        </li>
+      </ul>
+    </template>
+    <template #empty />
+  </ContentNavigation>
 </template>
 
 <style scoped>