docs: integrate @nuxt/ui-pro (#739)

Co-authored-by: Pooya Parsa <pooya@pi0.io>
Co-authored-by: Florent Delerue <florentdelerue@hotmail.com>
Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/app.vue

@@ -1,16 +1,16 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <div>
-    <Header />
+    <Header v-if="!$route.path.startsWith('/examples')" :links="links" />
 
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
 
-    <Footer />
+    <Footer v-if="!$route.path.startsWith('/examples')" />
 
     <ClientOnly>
-      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" />
+      <LazyUDocsSearch ref="searchRef" :files="files" :navigation="navigation" :groups="groups" :links="links" />
     </ClientOnly>
 
     <UNotifications>
@@ -42,10 +42,17 @@ const { data: files } = useLazyFetch<ParsedContent[]>('/api/search.json', { defa
 // Computed
 
 const navigation = computed(() => {
-  const main = nav.value.filter(item => item._path !== '/dev')
-  const dev = nav.value.find(item => item._path === '/dev')?.children
+  if (branch.value?.name === 'dev') {
+    const dev = nav.value.find(item => item._path === '/dev')?.children
+    const pro = nav.value.find(item => item._path === '/pro')
 
-  return branch.value?.name === 'dev' ? dev : main
+    return [
+      pro,
+      ...dev
+    ]
+  }
+
+  return nav.value.filter(item => item._path !== '/dev')
 })
 
 const groups = computed(() => {
@@ -58,6 +65,54 @@ const groups = computed(() => {
 
 const color = computed(() => colorMode.value === 'dark' ? '#18181b' : 'white')
 
+const links = computed(() => {
+  return [{
+    label: 'Documentation',
+    icon: 'i-heroicons-book-open',
+    to: `${branch.value?.name === 'dev' ? '/dev' : ''}/getting-started`
+  }, {
+    label: 'Playground',
+    icon: 'i-simple-icons-stackblitz',
+    to: '/playground'
+  }, {
+    label: 'Roadmap',
+    icon: 'i-heroicons-academic-cap',
+    to: '/roadmap'
+  }, {
+    label: 'Pro',
+    icon: 'i-heroicons-square-3-stack-3d',
+    to: '/pro',
+    children: [{
+      label: 'Features',
+      to: '/pro#features',
+      exactHash: true,
+      icon: 'i-heroicons-beaker',
+      description: 'Discover all the features of Nuxt UI Pro.'
+    }, {
+      label: 'Pricing',
+      to: '/pro#pricing',
+      exactHash: true,
+      icon: 'i-heroicons-credit-card',
+      description: 'A simple pricing, for solo developers or teams.'
+    }, {
+      label: 'Guide',
+      to: '/pro/guide',
+      icon: 'i-heroicons-book-open',
+      description: 'Learn how to use Nuxt UI Pro in your app.'
+    }, {
+      label: 'Components',
+      to: '/pro/components',
+      icon: 'i-heroicons-cube-transparent',
+      description: 'Discover all the components available in Nuxt UI Pro.'
+    }]
+  }, {
+    label: 'Releases',
+    icon: 'i-heroicons-rocket-launch',
+    to: 'https://github.com/nuxt/ui/releases',
+    target: '_blank'
+  }]
+})
+
 // Watch
 
 watch(() => searchRef.value?.commandPaletteRef?.query, debounce((query: string) => {