From 8059d540e3b6d8e3127973a9db518fee63b3338a Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 7 Nov 2024 16:25:01 +0100
Subject: [PATCH] docs(app): improve links

---
 docs/app/app.vue                              | 47 ++++++++-----------
 docs/app/components/Header.vue                |  6 +--
 docs/app/error.vue                            | 47 ++++++++-----------
 docs/app/pages/[...slug].vue                  |  6 +--
 .../content/1.getting-started/.navigation.yml |  1 +
 docs/content/2.composables/.navigation.yml    |  2 +
 docs/content/3.components/.navigation.yml     |  2 +
 7 files changed, 49 insertions(+), 62 deletions(-)
 create mode 100644 docs/content/2.composables/.navigation.yml
 create mode 100644 docs/content/3.components/.navigation.yml

diff --git a/docs/app/app.vue b/docs/app/app.vue
index 6996b78a..108058c0 100644
--- a/docs/app/app.vue
+++ b/docs/app/app.vue
@@ -20,33 +20,26 @@ const searchTerm = ref('')
 //   useTrackEvent('Search', { props: { query: `${query} - ${searchTerm.value?.commandPaletteRef.results.length} results` } })
 // }, 500))
 
-const links = computed(() => {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-book-open',
-    to: '/getting-started',
-    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value?.find(item => item.path === '/pro')
-    ? [{
-        label: 'Pro',
-        icon: 'i-lucide-layers-3',
-        to: '/pro',
-        active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
-      }, {
-        label: 'Pricing',
-        icon: 'i-lucide-credit-card',
-        to: '/pro/pricing'
-      }, {
-        label: 'Templates',
-        icon: 'i-lucide-monitor',
-        to: '/pro/templates'
-      }]
-    : []), {
-    label: 'Releases',
-    icon: 'i-lucide-rocket',
-    to: '/releases'
-  }].filter(Boolean)
-})
+const links = computed(() => [{
+  label: 'Docs',
+  icon: 'i-lucide-book-open',
+  to: '/getting-started',
+  active: route.path.startsWith('/getting-started')
+}, {
+  label: 'Components',
+  icon: 'i-lucide-box',
+  to: '/components',
+  active: route.path.startsWith('/components')
+}, {
+  label: 'Roadmap',
+  icon: 'i-lucide-map',
+  to: '/roadmap'
+}, {
+  label: 'Releases',
+  icon: 'i-lucide-rocket',
+  to: 'https://github.com/nuxt/ui/releases',
+  target: '_blank'
+}].filter(Boolean))
 
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index 49946cf2..49a022fd 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -2,7 +2,7 @@
 import type { ContentNavigationItem } from '@nuxt/content'
 import type { NavigationMenuItem } from '@nuxt/ui'
 
-defineProps<{
+const props = defineProps<{
   links: NavigationMenuItem[]
 }>()
 
@@ -10,7 +10,7 @@ const config = useRuntimeConfig().public
 
 const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
 
-// const items = computed(() => props.links.map(({ icon, ...link }) => link))
+const items = computed(() => props.links.map(({ icon, ...link }) => link))
 
 defineShortcuts({
   meta_g: () => {
@@ -29,7 +29,7 @@ defineShortcuts({
       </NuxtLink>
     </template>
 
-    <!-- <UNavigationMenu :items="items" variant="link" /> -->
+    <UNavigationMenu :items="items" variant="link" />
 
     <template #right>
       <ThemePicker />
diff --git a/docs/app/error.vue b/docs/app/error.vue
index 11618781..243f5e5f 100644
--- a/docs/app/error.vue
+++ b/docs/app/error.vue
@@ -13,33 +13,26 @@ const colorMode = useColorMode()
 const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
 const { data: files } = await useAsyncData('files', () => queryCollectionSearchSections('content', { ignoredTags: ['style'] }))
 
-const links = computed(() => {
-  return [{
-    label: 'Docs',
-    icon: 'i-lucide-book-open',
-    to: '/getting-started',
-    active: route.path.startsWith('/getting-started') || route.path.startsWith('/components')
-  }, ...(navigation.value?.find(item => item.path === '/pro')
-    ? [{
-        label: 'Pro',
-        icon: 'i-lucide-layers-3',
-        to: '/pro',
-        active: route.path.startsWith('/pro/getting-started') || route.path.startsWith('/pro/components') || route.path.startsWith('/pro/prose')
-      }, {
-        label: 'Pricing',
-        icon: 'i-lucide-credit-card',
-        to: '/pro/pricing'
-      }, {
-        label: 'Templates',
-        icon: 'i-lucide-monitor',
-        to: '/pro/templates'
-      }]
-    : []), {
-    label: 'Releases',
-    icon: 'i-lucide-rocket',
-    to: '/releases'
-  }].filter(Boolean)
-})
+const links = computed(() => [{
+  label: 'Docs',
+  icon: 'i-lucide-book-open',
+  to: '/getting-started',
+  active: route.path.startsWith('/getting-started')
+}, {
+  label: 'Components',
+  icon: 'i-lucide-box',
+  to: '/components',
+  active: route.path.startsWith('/components')
+}, {
+  label: 'Roadmap',
+  icon: 'i-lucide-map',
+  to: '/roadmap'
+}, {
+  label: 'Releases',
+  icon: 'i-lucide-rocket',
+  to: 'https://github.com/nuxt/ui/releases',
+  target: '_blank'
+}].filter(Boolean))
 
 const color = computed(() => colorMode.value === 'dark' ? (colors as any)[appConfig.ui.colors.neutral][900] : 'white')
 const radius = computed(() => `:root { --ui-radius: ${appConfig.theme.radius}rem; }`)
diff --git a/docs/app/pages/[...slug].vue b/docs/app/pages/[...slug].vue
index 7e3b3c35..77c3b8aa 100644
--- a/docs/app/pages/[...slug].vue
+++ b/docs/app/pages/[...slug].vue
@@ -34,7 +34,7 @@ defineOgImageComponent('Docs', {
 })
 
 const communityLinks = computed(() => [{
-  icon: 'i-lucide-square-pen',
+  icon: 'i-lucide-file-pen',
   label: 'Edit this page',
   to: `https://github.com/nuxt/ui/edit/v3/docs/content/${page?.value?.stem}.md`,
   target: '_blank'
@@ -43,10 +43,6 @@ const communityLinks = computed(() => [{
   label: 'Star on GitHub',
   to: 'https://github.com/nuxt/ui',
   target: '_blank'
-}, {
-  label: 'Roadmap',
-  icon: 'i-lucide-map',
-  to: '/roadmap'
 }])
 
 // const resourcesLinks = [{
diff --git a/docs/content/1.getting-started/.navigation.yml b/docs/content/1.getting-started/.navigation.yml
index bcd2ba14..f9de2eae 100644
--- a/docs/content/1.getting-started/.navigation.yml
+++ b/docs/content/1.getting-started/.navigation.yml
@@ -1 +1,2 @@
 title: Getting Started
+icon: i-lucide-square-play
diff --git a/docs/content/2.composables/.navigation.yml b/docs/content/2.composables/.navigation.yml
new file mode 100644
index 00000000..93566016
--- /dev/null
+++ b/docs/content/2.composables/.navigation.yml
@@ -0,0 +1,2 @@
+title: Composables
+icon: i-lucide-square-function
diff --git a/docs/content/3.components/.navigation.yml b/docs/content/3.components/.navigation.yml
new file mode 100644
index 00000000..c1d53f21
--- /dev/null
+++ b/docs/content/3.components/.navigation.yml
@@ -0,0 +1,2 @@
+title: Components
+icon: i-lucide-square-code