fix(theme): support custom target and rel in navbar links for mobile (#2400)

src/client/theme-default/components/VPNavScreenMenu.vue

@@ -11,8 +11,7 @@ const { theme } = useData()
     <template v-for="item in theme.nav" :key="item.text">
       <VPNavScreenMenuLink
         v-if="'link' in item"
-        :text="item.text"
-        :link="item.link"
+        :item="item"
       />
       <VPNavScreenMenuGroup
         v-else

src/client/theme-default/components/VPNavScreenMenuGroup.vue

@@ -35,10 +35,7 @@ function toggle() {
     <div :id="groupId" class="items">
       <template v-for="item in items" :key="item.text">
         <div v-if="'link' in item" :key="item.text" class="item">
-          <VPNavScreenMenuGroupLink
-            :text="item.text"
-            :link="item.link"
-          />
+          <VPNavScreenMenuGroupLink :item="item" />
         </div>
 
         <div v-else class="group">

src/client/theme-default/components/VPNavScreenMenuGroupLink.vue

@@ -1,18 +1,24 @@
 <script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
 import { inject } from 'vue'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  text: string
-  link: string
+  item: DefaultTheme.NavItemWithLink
 }>()
 
 const closeScreen = inject('close-screen') as () => void
 </script>
 
 <template>
-  <VPLink class="VPNavScreenMenuGroupLink" :href="link" @click="closeScreen">
-    {{ text }}
+  <VPLink
+    class="VPNavScreenMenuGroupLink"
+    :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
+    @click="closeScreen"
+  >
+    {{ item.text }}
   </VPLink>
 </template>
 

src/client/theme-default/components/VPNavScreenMenuGroupSection.vue

@@ -14,8 +14,7 @@ defineProps<{
     <VPNavScreenMenuGroupLink
       v-for="item in items"
       :key="item.text"
-      :text="item.text"
-      :link="item.link"
+      :item="item"
     />
   </div>
 </template>

src/client/theme-default/components/VPNavScreenMenuLink.vue

@@ -1,18 +1,24 @@
 <script lang="ts" setup>
+import type { DefaultTheme } from 'vitepress/theme'
 import { inject } from 'vue'
 import VPLink from './VPLink.vue'
 
 defineProps<{
-  text: string
-  link: string
+  item: DefaultTheme.NavItemWithLink
 }>()
 
 const closeScreen = inject('close-screen') as () => void
 </script>
 
 <template>
-  <VPLink class="VPNavScreenMenuLink" :href="link" @click="closeScreen">
-    {{ text }}
+  <VPLink
+    class="VPNavScreenMenuLink"
+    :href="item.link"
+    :target="item.target"
+    :rel="item.rel"
+    @click="closeScreen"
+  >
+    {{ item.text }}
   </VPLink>
 </template>