feat(layout): handle deeply nested content (#1190)

Author: hendrikheil

layer/app/layouts/default.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { ContentNavigationItem } from '@nuxt/content'
+import { flattenNavigation } from '../utils/navigation'
 
 const route = useRoute()
 const docsNavigation = inject<Ref<ContentNavigationItem[]>>('navigation')
-const docsLink = computed(() => docsNavigation?.value.flatMap(item => item.children || [item]) || [])
+const docsLink = computed(() => flattenNavigation(docsNavigation?.value))
 const isDocs = computed(() => docsLink.value.findIndex(item => item.path === route.path) !== -1)
 </script>
 

layer/app/utils/navigation.ts

@@ -0,0 +1,7 @@
+import type { ContentNavigationItem } from '@nuxt/content'
+
+export const flattenNavigation = (items?: ContentNavigationItem[]): ContentNavigationItem[] => items?.flatMap(
+  item => item.children
+    ? flattenNavigation(item.children)
+    : [item],
+) || []