fix(theme): fix menu dropdown group dividers (#5365)

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

@@ -11,7 +11,7 @@ defineProps<{
 <template>
   <div class="VPMenu">
     <ul v-if="items" class="items">
-      <li v-for="item in items" :key="JSON.stringify(item)">
+      <template v-for="item in items" :key="JSON.stringify(item)">
         <VPMenuLink v-if="'link' in item" :item />
         <component
           v-else-if="'component' in item"
@@ -19,7 +19,7 @@ defineProps<{
           v-bind="item.props"
         />
         <VPMenuGroup v-else :text="item.text" :items="item.items" />
-      </li>
+      </template>
     </ul>
 
     <slot />

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

@@ -9,13 +9,15 @@ defineProps<{
 </script>
 
 <template>
-  <div class="VPMenuGroup">
+  <li class="VPMenuGroup">
     <p v-if="text" class="title">{{ text }}</p>
 
+    <ul>
       <template v-for="item in items" :key="JSON.stringify(item)">
         <VPMenuLink v-if="'link' in item" :item />
       </template>
-  </div>
+    </ul>
+  </li>
 </template>
 
 <style scoped>

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

@@ -31,7 +31,7 @@ defineOptions({ inheritAttrs: false })
 </script>
 
 <template>
-  <div class="VPMenuLink">
+  <li class="VPMenuLink">
     <VPLink
       v-bind="$attrs"
       :class="{ active: isActiveLink }"
@@ -42,7 +42,7 @@ defineOptions({ inheritAttrs: false })
     >
       <span v-html="item.text"></span>
     </VPLink>
-  </div>
+  </li>
 </template>
 
 <style scoped>

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

@@ -32,7 +32,7 @@ const hasExtraContent = computed(
     >
       <li class="trans-title">{{ currentLang.label }}</li>
 
-      <li v-for="locale in localeLinks" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink
           :item="locale"
           :external="false"
@@ -42,7 +42,7 @@ const hasExtraContent = computed(
           :dir="locale.dir"
           data-allow-mismatch="attribute"
         />
-      </li>
+      </template>
     </ul>
 
     <div

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

@@ -20,7 +20,7 @@ const { localeLinks, currentLang } = useLangs({
     <ul class="items">
       <li class="title">{{ currentLang.label }}</li>
 
-      <li v-for="locale in localeLinks" :key="locale.link">
+      <template v-for="locale in localeLinks" :key="locale.link">
         <VPMenuLink
           :item="locale"
           :external="false"
@@ -30,7 +30,7 @@ const { localeLinks, currentLang } = useLangs({
           :dir="locale.dir"
           data-allow-mismatch="attribute"
         />
-      </li>
+      </template>
     </ul>
   </VPFlyout>
 </template>