chore: update playground

Author: farnabaz

playground/app.vue

@@ -9,5 +9,7 @@
 
 <style>
 @import "tailwindcss";
-@import "@nuxt/ui";
+@import "@nuxt/ui-pro";
+
+@source "./content/**/*";
 </style>

playground/layouts/default.vue

@@ -1,16 +1,14 @@
 <script setup lang="ts">
 const { data } = await useAsyncData('contents-list', () => queryCollectionNavigation('content'))
 const links = computed(() => {
-  return data.value?.flatMap(item => ([
-    {
-      label: item.title,
-      to: item.page !== false ? item.path : undefined,
-    },
-    ...(item.children?.map(child => ({
-      label: ` -- ${child.title}`,
+  return data.value?.map(item => ({
+    label: item.title,
+    to: item.page !== false ? item.path : undefined,
+    children: (item.children?.map(child => ({
+      label: child.title,
       to: child.path,
     })) ?? []),
-  ]))
+  }))
 })
 </script>
 
@@ -19,7 +17,7 @@ const links = computed(() => {
     <UNavigationMenu
       class="w-[200px] flex-none p-2 sticky top-0 h-screen"
       orientation="vertical"
-      :items="[links]"
+      :items="links"
     />
     <div class="flex-1 p-4 prose prose-invert">
       <slot />

playground/layouts/nuxt.vue

@@ -1,24 +1,21 @@
 <script setup lang="ts">
 const { data } = await useAsyncData('nuxt-contents-list', () => queryCollectionNavigation('nuxt'))
 const links = computed(() => {
-  const root = data.value?.[0].children || []
-  return root?.flatMap(item => ([
-    {
-      label: item.title,
-      to: item.page !== false ? item.path : undefined,
-    },
-    ...(item.children?.map(child => ({
-      label: ` -- ${child.title}`,
+  return data.value?.[0].children?.map(item => ({
+    label: item.title,
+    to: item.page !== false ? item.path : undefined,
+    children: (item.children?.map(child => ({
+      label: child.title,
       to: child.path,
     })) ?? []),
-  ]))
+  }))
 })
 </script>
 
 <template>
   <div class="flex">
     <UNavigationMenu
-      class="w-[200px] flex-none p-2 sticky top-0 h-screen"
+      class="w-[200px] flex-none p-2 sticky top-0 h-screen overflow-y-auto"
       orientation="vertical"
       :items="links"
     />

playground/nuxt.config.ts

@@ -1,7 +1,7 @@
 export default defineNuxtConfig({
   modules: [
-    '../src/module',
     '@nuxt/ui-pro',
+    '@nuxt/content',
     '@nuxthub/core',
   ],
   content: {

playground/package.json

@@ -9,6 +9,7 @@
     "dev:prepare": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/content": "latest",
     "@nuxt/ui-pro": "3.0.0-alpha.9",
     "@nuxthub/core": "^0.8.6",
     "nuxt": "^3.14.159"