From bf45094f8939b79fb17130951fd4764dd1a63aab Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 9 Dec 2024 15:13:18 +0100
Subject: [PATCH] docs(app): display icon in navigation for ui-pro components

---
 docs/app/components/Header.vue |  8 +++++++-
 docs/app/layouts/docs.vue      | 10 +++++++++-
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/docs/app/components/Header.vue b/docs/app/components/Header.vue
index e6aaee07..5c653268 100644
--- a/docs/app/components/Header.vue
+++ b/docs/app/components/Header.vue
@@ -80,7 +80,13 @@ defineShortcuts({
         <FrameworkSelect />
       </div>
 
-      <UContentNavigation :navigation="navigation" highlight />
+      <UContentNavigation :navigation="navigation" highlight>
+        <template #link-title="{ link }">
+          {{ link.title }}
+
+          <UIcon v-if="link.module === 'ui-pro' && link.path.startsWith('/components')" name="i-lucide-boxes" class="size-3 align-middle mb-[3px] text-(--ui-text-dimmed)" />
+        </template>
+      </UContentNavigation>
     </template>
   </UHeader>
 </template>
diff --git a/docs/app/layouts/docs.vue b/docs/app/layouts/docs.vue
index 5c0c7907..8709c074 100644
--- a/docs/app/layouts/docs.vue
+++ b/docs/app/layouts/docs.vue
@@ -17,7 +17,15 @@ const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
               </div>
             </template>
 
-            <UContentNavigation :navigation="navigation" highlight />
+            <UContentNavigation :navigation="navigation" highlight>
+              <template #link-title="{ link }">
+                {{ 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-boxes" class="size-3 align-middle mb-[3px] text-(--ui-text-dimmed) hover:text-(--ui-text-muted) transition-colors" />
+                </UTooltip>
+              </template>
+            </UContentNavigation>
           </UPageAside>
         </template>