docs: link playground nav item directly to v0play.vuetifyjs.com

Update AppNavLink to handle external URLs via <a> tag, and point the
playground standalone nav item to the external URL instead of the
internal /playground redirect page.

Author: johnleider

apps/docs/build/generate-nav.ts

@@ -230,7 +230,7 @@ async function generateNav (): Promise<NavItem[]> {
     pages.get(key)!.push(pageInfo)
   }
 
-  standalonePages.push({ item: { name: 'Playground', to: '/playground' }, order: 1.6 })
+  standalonePages.push({ item: { name: 'Playground', to: 'https://v0play.vuetifyjs.com' }, order: 1.6 })
 
   const nav: NavItem[] = []
   const sectionEntries = Object.entries(SECTIONS).toSorted((a, b) => a[1].order - b[1].order)

apps/docs/src/components/app/AppNavLink.vue

@@ -50,7 +50,8 @@
     return 'expand'
   })
 
-  const isActive = toRef(() => to && (route.path === to || route.path.startsWith(`${to}/`)))
+  const isExternal = toRef(() => !!to?.startsWith('http'))
+  const isActive = toRef(() => !isExternal.value && to && (route.path === to || route.path.startsWith(`${to}/`)))
   // Check children Map directly for reactivity
   const childIds = toRef(() => navNested.nested.children.get(id) ?? [])
   const hasChildren = toRef(() => childIds.value.length > 0)
@@ -148,9 +149,26 @@
       <!-- Dash prefix for top-level solo links (only when collapsible nav is enabled) -->
       <span v-else-if="isTopLevel && !navConfig.flatMode.value" aria-hidden="true" class="size-5 shrink-0 flex items-center justify-center text-divider">–</span>
 
-      <!-- Link (navigable) -->
+      <!-- External link -->
       <Atom
-        v-if="to"
+        v-if="to && isExternal"
+        as="a"
+        class="font-semibold icon-text flex-1 min-w-0"
+        :class="[
+          'hover:underline hover:text-primary focus-visible:underline focus-visible:text-primary',
+          !isTopLevel && !hasChildren && 'opacity-70 hover:opacity-100 focus-visible:opacity-100',
+        ]"
+        :href="to"
+        rel="noopener"
+        target="_blank"
+      >
+        <span class="truncate">{{ name }}</span>
+        <span v-if="emphasized" class="w-2 h-2 rounded-[2px] shrink-0" :class="devmode ? 'bg-error' : 'bg-success'" />
+      </Atom>
+
+      <!-- Internal link (navigable) -->
+      <Atom
+        v-else-if="to"
         :aria-current="isActive ? 'page' : undefined"
         :as
         class="font-semibold icon-text flex-1 min-w-0"