fix: nav menu with group not styled correctly

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

@@ -18,16 +18,27 @@ defineProps<{
 </template>
 
 <style scoped>
+.VPMenuGroup {
+  margin: 12px -12px 0;
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 12px 12px 0;
+}
+
+.VPMenuGroup:first-child {
+  margin-top: 0;
+  border-top: 0;
+  padding-top: 0;
+}
+
 .VPMenuGroup + .VPMenuGroup {
-  margin-top: 8px;
+  margin-top: 12px;
   border-top: 1px solid var(--vp-c-divider-light);
-  padding-top: 8px;
 }
 
 .title {
-  padding: 0 16px;
+  padding: 0 12px;
-  line-height: 28px;
+  line-height: 32px;
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 600;
   color: var(--vp-c-text-2);
   transition: color 0.25s;

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

@@ -11,17 +11,24 @@ const { page } = useData()
 </script>
 
 <template>
-  <VPLink 
+  <div class="VPMenuLink">
-    class="VPMenuLink"
+    <VPLink 
-    :class="{ active: isActive(page.relativePath, item.activeMatch || item.link) }"
+      :class="{ active: isActive(page.relativePath, item.activeMatch || item.link) }"
-    :href="item.link"
+      :href="item.link"
-  >
+    >
-    {{ item.text }}
+      {{ item.text }}
-  </VPLink>
+    </VPLink>
+  </div>
 </template>
 
 <style scoped>
-.VPMenuLink {
+.VPMenuGroup + .VPMenuLink {
+  margin: 12px -12px 0;
+  border-top: 1px solid var(--vp-c-divider-light);
+  padding: 12px 12px 0;
+}
+
+.link {
   display: block;
   border-radius: 6px;
   padding: 0 12px;
@@ -33,16 +40,16 @@ const { page } = useData()
   transition: background-color 0.25s, color 0.25s;
 }
 
-.VPMenuLink:hover {
+.link:hover {
   color: var(--vp-c-brand);
   background-color: var(--vp-c-bg-mute);
 }
 
-.dark .VPMenuLink:hover {
+.dark .link:hover {
   background-color: var(--vp-c-bg-soft);
 }
 
-.VPMenuLink.active {
+.link.active {
   color: var(--vp-c-brand);
 }
 </style>