From b96712c0744f9ac7ebd65cf4087b2e9fd0d6762b Mon Sep 17 00:00:00 2001
From: Divyansh Singh <40380293+brc-dd@users.noreply.github.com>
Date: Sun, 13 Oct 2024 15:01:15 +0530
Subject: [PATCH] fix: reapply #4260

---
 .../theme-default/components/VPMenuLink.vue       | 15 ++++++++++++---
 .../theme-default/components/VPNavBarMenuLink.vue |  2 +-
 .../components/VPNavScreenMenuGroupLink.vue       |  3 ++-
 .../components/VPNavScreenMenuLink.vue            | 10 +++++++---
 4 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/client/theme-default/components/VPMenuLink.vue b/src/client/theme-default/components/VPMenuLink.vue
index 52b4fac38ea0..d9ed1089a7a6 100644
--- a/src/client/theme-default/components/VPMenuLink.vue
+++ b/src/client/theme-default/components/VPMenuLink.vue
@@ -14,12 +14,19 @@ const { page } = useData()
 <template>
   <div class="VPMenuLink">
     <VPLink
-      :class="{ active: isActive(page.relativePath, item.activeMatch || item.link, !!item.activeMatch) }"
+      :class="{
+        active: isActive(
+          page.relativePath,
+          item.activeMatch || item.link,
+          !!item.activeMatch
+        )
+      }"
       :href="item.link"
       :target="item.target"
       :rel="item.rel"
+      :no-icon="item.noIcon"
     >
-      {{ item.text }}
+      <span v-html="item.text"></span>
     </VPLink>
   </div>
 </template>
@@ -40,7 +47,9 @@ const { page } = useData()
   font-weight: 500;
   color: var(--vp-c-text-1);
   white-space: nowrap;
-  transition: background-color 0.25s, color 0.25s;
+  transition:
+    background-color 0.25s,
+    color 0.25s;
 }
 
 .link:hover {
diff --git a/src/client/theme-default/components/VPNavBarMenuLink.vue b/src/client/theme-default/components/VPNavBarMenuLink.vue
index e5c166a0a663..6f5047918490 100644
--- a/src/client/theme-default/components/VPNavBarMenuLink.vue
+++ b/src/client/theme-default/components/VPNavBarMenuLink.vue
@@ -22,9 +22,9 @@ const { page } = useData()
       )
     }"
     :href="item.link"
-    :noIcon="item.noIcon"
     :target="item.target"
     :rel="item.rel"
+    :no-icon="item.noIcon"
     tabindex="0"
   >
     <span v-html="item.text"></span>
diff --git a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
index e84a977006cd..283cec7c9228 100644
--- a/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuGroupLink.vue
@@ -16,9 +16,10 @@ const closeScreen = inject('close-screen') as () => void
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
+    :no-icon="item.noIcon"
     @click="closeScreen"
   >
-    {{ item.text }}
+    <span v-html="item.text"></span>
   </VPLink>
 </template>
 
diff --git a/src/client/theme-default/components/VPNavScreenMenuLink.vue b/src/client/theme-default/components/VPNavScreenMenuLink.vue
index e3d54cb1b18b..fde606fee731 100644
--- a/src/client/theme-default/components/VPNavScreenMenuLink.vue
+++ b/src/client/theme-default/components/VPNavScreenMenuLink.vue
@@ -16,9 +16,11 @@ const closeScreen = inject('close-screen') as () => void
     :href="item.link"
     :target="item.target"
     :rel="item.rel"
+    :no-icon="item.noIcon"
     @click="closeScreen"
-    v-html="item.text"
-  />
+  >
+    <span v-html="item.text"></span>
+  </VPLink>
 </template>
 
 <style scoped>
@@ -30,7 +32,9 @@ const closeScreen = inject('close-screen') as () => void
   font-size: 14px;
   font-weight: 500;
   color: var(--vp-c-text-1);
-  transition: border-color 0.25s, color 0.25s;
+  transition:
+    border-color 0.25s,
+    color 0.25s;
 }
 
 .VPNavScreenMenuLink:hover {