From f364a5d1d3c066c9728beb5d07576d6cb4b0640d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BF=A0=20/=20green?= <green@sapphi.red>
Date: Mon, 22 May 2023 12:18:18 +0900
Subject: [PATCH] fix(theme): support custom target and rel in navbar links for
 mobile (#2400)

---
 .../theme-default/components/VPNavScreenMenu.vue   |  3 +--
 .../components/VPNavScreenMenuGroup.vue            |  5 +----
 .../components/VPNavScreenMenuGroupLink.vue        | 14 ++++++++++----
 .../components/VPNavScreenMenuGroupSection.vue     |  3 +--
 .../components/VPNavScreenMenuLink.vue             | 14 ++++++++++----
 5 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/client/theme-default/components/VPNavScreenMenu.vue b/src/client/theme-default/components/VPNavScreenMenu.vue
index cf1beba1..b035d608 100644
--- a/src/client/theme-default/components/VPNavScreenMenu.vue
+++ b/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
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroup.vue b/src/client/theme-default/components/VPNavScreenMenuGroup.vue
index adab4b63..a78ed734 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroup.vue
+++ b/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">
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index 7a64eead..550decb4 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/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>
 
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue b/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
index 216ddcf6..15efcef1 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupSection.vue
+++ b/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>
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index 7c03b39f..85977bc1 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/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>