fix: navbar text

packages/theme/src/client/components/Flyout/MenuGroup.vue

@@ -12,7 +12,7 @@ defineProps<{
   <div class="menu-group">
     <p v-if="text" class="title">
       <Icon v-if="icon" :name="icon" />
-      <span>{{ text }}</span>
+      <span v-text="text"></span>
     </p>
 
     <template v-for="item in items">

packages/theme/src/client/components/Flyout/MenuLink.vue

@@ -23,7 +23,7 @@ const page = usePageData()
       :href="item.link"
     >
       <Icon v-if="item.icon" :name="item.icon" />
-      <i>{{ item.text }}</i>
+      <i v-text="item.text"></i>
     </AutoLink>
   </div>
 </template>

packages/theme/src/client/components/Nav/NavBarMenuLink.vue

@@ -25,7 +25,7 @@ const page = usePageData()
     :no-icon="true"
   >
     <Icon v-if="item.icon" :name="item.icon" />
-    <i>{{ item.text }}</i>
+    <i v-text="item.text"></i>
   </AutoLink>
 </template>
 

packages/theme/src/client/components/Nav/NavScreenMenuGroup.vue

@@ -31,7 +31,7 @@ function toggle() {
     >
       <span class="button-text">
         <Icon v-if="icon" :name="icon" />
-        {{ text }}
+        <i v-text="text"></i>
       </span>
       <IconPlus class="button-icon" />
     </button>
@@ -106,6 +106,10 @@ function toggle() {
   color: var(--vp-c-brand);
 }
 
+.button-text i {
+  font-style: normal;
+}
+
 .button-icon {
   width: 14px;
   height: 14px;

packages/theme/src/client/components/Nav/NavScreenMenuGroupLink.vue

@@ -18,7 +18,7 @@ const closeScreen = inject('close-screen') as () => void
     @click="closeScreen"
   >
     <Icon v-if="icon" :name="icon" />
-    <i>{{ text }}</i>
+    <i v-text="text"></i>
   </AutoLink>
 </template>
 

packages/theme/src/client/components/Nav/NavScreenMenuLink.vue

@@ -14,7 +14,7 @@ const closeScreen = inject('close-screen') as () => void
 <template>
   <AutoLink class="nav-screen-menu-link" :href="link" @click="closeScreen">
     <Icon v-if="icon" :name="icon" />
-    <i>{{ text }}</i>
+    <i v-text="text"></i>
   </AutoLink>
 </template>