format

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

@@ -12,7 +12,11 @@ defineProps<{
     <div v-if="items" class="items">
       <template v-for="item in items" :key="item.text">
         <VPMenuLink v-if="'link' in item" :item="item" />
-        <component v-else-if="'component' in item" :is="item.component" v-bind="{ text: item.text }" />
+        <component
+          v-else-if="'component' in item"
+          :is="item.component"
+          v-bind="{ text: item.text }"
+        />
         <VPMenuGroup v-else :text="item.text" :items="item.items" />
       </template>
     </div>
@@ -64,7 +68,7 @@ defineProps<{
   font-size: 12px;
   font-weight: 500;
   color: var(--vp-c-text-2);
-  transition: color .5s;
+  transition: color 0.5s;
 }
 
 .VPMenu :deep(.action) {

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

@@ -7,11 +7,21 @@ const { theme } = useData()
 </script>
 
 <template>
-  <nav v-if="theme.nav" aria-labelledby="main-nav-aria-label" class="VPNavBarMenu">
-    <span id="main-nav-aria-label" class="visually-hidden">Main Navigation</span>
+  <nav
+    v-if="theme.nav"
+    aria-labelledby="main-nav-aria-label"
+    class="VPNavBarMenu"
+  >
+    <span id="main-nav-aria-label" class="visually-hidden">
+      Main Navigation
+    </span>
     <template v-for="item in theme.nav" :key="item.text">
       <VPNavBarMenuLink v-if="'link' in item" :item="item" />
-      <component v-else-if="'component' in item" :is="item.component" v-bind="{ text: item.text }" />
+      <component
+        v-else-if="'component' in item"
+        :is="item.component"
+        v-bind="{ text: item.text }"
+      />
       <VPNavBarMenuGroup v-else :item="item" />
     </template>
   </nav>

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

@@ -14,9 +14,9 @@ const { page } = useData()
 const isChildActive = (navItem: DefaultTheme.NavItem) => {
   if ('link' in navItem) {
     return isActive(
-        page.value.relativePath,
-        navItem.link,
-        !!props.item.activeMatch
+      page.value.relativePath,
+      navItem.link,
+      !!props.item.activeMatch
     )
   } else if ('component' in navItem) {
     return false
@@ -32,11 +32,9 @@ const childrenActive = computed(() => isChildActive(props.item))
   <VPFlyout
     :class="{
       VPNavBarMenuGroup: true,
-      active: isActive(
-        page.relativePath,
-        item.activeMatch,
-        !!item.activeMatch
-      ) || childrenActive
+      active:
+        isActive(page.relativePath, item.activeMatch, !!item.activeMatch) ||
+        childrenActive
     }"
     :button="item.text"
     :items="item.items"

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

@@ -9,11 +9,12 @@ const { theme } = useData()
 <template>
   <nav v-if="theme.nav" class="VPNavScreenMenu">
     <template v-for="item in theme.nav" :key="item.text">
-      <VPNavScreenMenuLink
-        v-if="'link' in item"
-        :item="item"
+      <VPNavScreenMenuLink v-if="'link' in item" :item="item" />
+      <component
+        v-else-if="'component' in item"
+        :is="item.component"
+        v-bind="{ text: item.text }"
       />
-      <component v-else-if="'component' in item" :is="item.component" v-bind="{ text: item.text }" />
       <VPNavScreenMenuGroup
         v-else
         :text="item.text || ''"

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

@@ -10,8 +10,8 @@ const props = defineProps<{
 
 const isOpen = ref(false)
 
-const groupId = computed(() =>
-  `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
+const groupId = computed(
+  () => `NavScreenGroup-${props.text.replace(' ', '-').toLowerCase()}`
 )
 
 function toggle() {
@@ -38,14 +38,14 @@ function toggle() {
         </div>
 
         <div v-else-if="'component' in item" :key="item.component" class="item">
-          <component :is="item.component" v-bind="{ text: item.text, screenMenu: true }" />
+          <component
+            :is="item.component"
+            v-bind="{ text: item.text, screenMenu: true }"
+          />
         </div>
 
         <div v-else class="group">
-          <VPNavScreenMenuGroupSection
-            :text="item.text"
-            :items="item.items"
-          />
+          <VPNavScreenMenuGroupSection :text="item.text" :items="item.items" />
         </div>
       </template>
     </div>