From efd104a10ff0f8f75ff85987b26060553c858af2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxt.com>
Date: Wed, 11 Dec 2024 11:15:05 +0100
Subject: [PATCH] docs(app): improve aside navigation (#2875)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
---
 docs/app/components/FrameworkSelect.vue |  1 +
 docs/app/components/Header.vue          | 13 ++++++++++---
 docs/app/components/ModuleSelect.vue    |  6 +++++-
 docs/app/composables/useSharedData.ts   |  6 +++---
 docs/app/layouts/docs.vue               | 15 ++++++++++-----
 5 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/docs/app/components/FrameworkSelect.vue b/docs/app/components/FrameworkSelect.vue
index 45410632..193528a0 100644
--- a/docs/app/components/FrameworkSelect.vue
+++ b/docs/app/components/FrameworkSelect.vue
@@ -18,6 +18,7 @@ onMounted(() => {
       indicator: 'bg-[var(--ui-bg)]',
       trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]'
     }"
+    size="sm"
     @update:model-value="(framework = $event as string)"
   />
 </template>
diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index 13cc0408..299d2e97 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -76,15 +76,22 @@ defineShortcuts({
       <USeparator type="dashed" class="mt-4 mb-6" />
 
       <div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] mb-5.5 -mx-2.5">
-        <ModuleSelect />
         <FrameworkSelect />
+        <ModuleSelect />
       </div>
 
       <UContentNavigation :navigation="navigation" highlight>
         <template #link-title="{ link }">
-          {{ link.title }}
+          <span class="inline-flex items-center gap-0.5">
+            {{ link.title }}
 
-          <UIcon v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" name="i-lucide-codesandbox" class="size-[14px] ml-0.5 align-middle mb-[3px] text-(--ui-text-dimmed)" />
+            <sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
+          </span>
+        </template>
+        <template #link-trailing="{ link }">
+          <UBadge v-if="link.badge" variant="subtle" size="sm" color="neutral" class="rounded-[var(--ui-radius)] text-[9px] font-semibold uppercase">
+            {{ link.badge }}
+          </UBadge>
         </template>
       </UContentNavigation>
     </template>
diff --git a/docs/app/components/ModuleSelect.vue b/docs/app/components/ModuleSelect.vue
index 88361684..9312f8d0 100644
--- a/docs/app/components/ModuleSelect.vue
+++ b/docs/app/components/ModuleSelect.vue
@@ -14,7 +14,11 @@ onMounted(() => {
     :items="modules"
     :content="false"
     color="neutral"
-    :ui="{ indicator: 'bg-[var(--ui-bg)]', trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]' }"
+    :ui="{
+      indicator: 'bg-[var(--ui-bg)]',
+      trigger: 'px-1 data-[state=active]:text-[var(--ui-text-highlighted)]'
+    }"
+    size="sm"
     @update:model-value="(module = $event as string)"
   />
 </template>
diff --git a/docs/app/composables/useSharedData.ts b/docs/app/composables/useSharedData.ts
index 848ec108..1a90670d 100644
--- a/docs/app/composables/useSharedData.ts
+++ b/docs/app/composables/useSharedData.ts
@@ -15,13 +15,13 @@ export function useSharedData() {
 
   const module = useCookie('nuxt-ui-module', { default: () => 'ui' })
   const modules = computed(() => [{
-    label: 'nuxt/ui',
+    label: 'UI',
     icon: 'i-lucide-box',
     value: 'ui',
     onSelect: () => module.value = 'ui'
   }, {
-    label: 'nuxt/ui-pro',
-    icon: 'i-lucide-codesandbox',
+    label: 'UI Pro',
+    icon: 'i-lucide-panels-top-left',
     value: 'ui-pro',
     disabled: framework.value === 'vue',
     onSelect: () => module.value = 'ui-pro'
diff --git a/docs/app/layouts/docs.vue b/docs/app/layouts/docs.vue
index 1429f285..36d77454 100644
--- a/docs/app/layouts/docs.vue
+++ b/docs/app/layouts/docs.vue
@@ -12,18 +12,23 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
           <UPageAside>
             <template #top>
               <div class="flex flex-col gap-2 w-[calc(100%+1.25rem)] -mx-2.5">
-                <ModuleSelect />
                 <FrameworkSelect />
+                <ModuleSelect />
               </div>
             </template>
 
             <UContentNavigation :navigation="navigation" highlight>
               <template #link-title="{ link }">
-                {{ link.title }}
+                <span class="inline-flex items-center gap-0.5">
+                  {{ link.title }}
 
-                <UTooltip v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" text="Only available in nuxt/ui-pro" :content="{ side: 'right' }">
-                  <UIcon name="i-lucide-codesandbox" class="size-[14px] ml-0.5 align-middle mb-[3px] text-(--ui-text-dimmed) hover:text-(--ui-text-muted) transition-colors" />
-                </UTooltip>
+                  <sup v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" class="text-[8px] font-medium text-(--ui-primary)">PRO</sup>
+                </span>
+              </template>
+              <template #link-trailing="{ link }">
+                <UBadge v-if="link.badge" variant="subtle" size="sm" color="neutral" class="rounded-[var(--ui-radius)] text-[9px] font-semibold uppercase">
+                  {{ link.badge }}
+                </UBadge>
               </template>
             </UContentNavigation>
           </UPageAside>