From fb1232330411e4b6a07633a5ec9058c63ab99860 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sat, 30 Nov 2024 11:48:03 +0100
Subject: [PATCH] docs(Header): move dropdown out of link

---
 docs/components/Header.vue | 49 +++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 24 deletions(-)

diff --git a/docs/components/Header.vue b/docs/components/Header.vue
index c052aaacb7..1b5564534d 100644
--- a/docs/components/Header.vue
+++ b/docs/components/Header.vue
@@ -10,33 +10,34 @@
     }"
   >
     <template #left>
-      <NuxtLink to="/" class="flex items-end gap-2 text-xl text-gray-900 dark:text-white min-w-0" aria-label="Nuxt UI">
+      <NuxtLink to="/" class="flex items-end gap-2 text-xl text-gray-900 dark:text-white min-w-0 shrink-0" aria-label="Nuxt UI">
         <LogoPro v-if="$route.path.startsWith('/pro')" class="w-auto h-6 shrink-0" />
         <Logo v-else class="w-auto h-6 shrink-0" />
-
-        <UDropdown
-          :items="[[{ label: $route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`, to: '/', class: 'text-primary-500 dark:text-primary-400' }, { label: 'v3.0.0-alpha.x', href: 'https://ui3.nuxt.dev' }]]"
-          :popper="{ strategy: 'absolute', offsetDistance: 11, placement: 'bottom-start' }"
-          :ui="{
-            background: 'dark:bg-gray-900',
-            ring: 'dark:ring-gray-800',
-            width: 'w-auto',
-            item: {
-              padding: 'p-1',
-              size: 'text-xs',
-              active: 'dark:bg-gray-800/50'
-            }
-          }"
-        >
-          <UButton
-            :label="$route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`"
-            trailing-icon="i-lucide-chevron-down"
-            variant="outline"
-            size="2xs"
-            class="-mb-[3px] font-semibold rounded-full truncate ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 dark:bg-primary-400/10 hover:bg-primary-500/15 dark:hover:bg-primary-400/15 transition-colors"
-          />
-        </UDropdown>
       </NuxtLink>
+
+      <UDropdown
+        :items="[[{ label: $route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`, class: 'text-primary-500 dark:text-primary-400' }, { label: 'v3.0.0-alpha.x', to: 'https://ui3.nuxt.dev' }]]"
+        :popper="{ strategy: 'absolute', offsetDistance: 11, placement: 'bottom-start' }"
+        :ui="{
+          background: 'dark:bg-gray-900',
+          ring: 'dark:ring-gray-800',
+          width: 'w-auto',
+          item: {
+            padding: 'p-1',
+            size: 'text-xs',
+            active: 'dark:bg-gray-800/50'
+          }
+        }"
+      >
+        <UButton
+          :label="$route.path.startsWith('/pro') ? `v${pkg.version.split('-')[0]}` : `v${config.version}`"
+          trailing-icon="i-lucide-chevron-down"
+          variant="outline"
+          size="2xs"
+          truncate
+          class="-mb-[6px] font-semibold rounded-full truncate ring-primary-500/25 dark:ring-primary-400/25 bg-primary-500/10 dark:bg-primary-400/10 hover:bg-primary-500/15 dark:hover:bg-primary-400/15 transition-colors"
+        />
+      </UDropdown>
     </template>
 
     <template #right>