feat(client): Add folding function to the navigation bar

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

@@ -12,7 +12,7 @@ defineProps<{
     <div v-if="items" class="items">
       <template v-for="item in items" :key="item.text">
         <VPMenuLink v-if="'link' in item" :item="item" />
-        <VPMenuGroup v-else :text="item.text" :items="item.items" />
+        <VPMenuGroup v-else :collapsed="item.collapsed" :text="item.text" :items="item.items" />
       </template>
     </div>
 

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

@@ -1,19 +1,65 @@
 <script lang="ts" setup>
+import { computed, ref } from 'vue';
 import VPMenuLink from './VPMenuLink.vue'
+import VPIconChevronRight from './icons/VPIconChevronRight.vue'
 
-defineProps<{
+const props = defineProps<{
   text?: string
+  collapsed?: Boolean
   items: any[]
 }>()
+
+const collapsed = ref(props.collapsed)
+
+function onItemInteraction(e: MouseEvent | Event) {
+  if ('key' in e && e.key !== 'Enter') {
+    return
+  }
+  collapsed.value = !collapsed.value
+}
+
+const collapsible = computed(() => {
+  return props.collapsed != null
+})
+
+const classes = computed(() => [
+  { collapsible:  collapsible.value},
+  { collapsed: collapsed.value },
+])
 </script>
 
 <template>
-  <div class="VPMenuGroup">
-    <p v-if="text" class="title">{{ text }}</p>
+  <div class="VPMenuGroup" :class="classes">
+    <div
+      v-if="collapsible && text"
+      class="title"
+      role="button"
+      v-on="
+        items
+          ? { click: onItemInteraction, keydown: onItemInteraction }
+          : {}
+      "
+      :tabindex="items && 0"
+    >
+      <p>{{ text }}</p>
+
+      <div
+        v-if="collapsed != null"
+        class="caret"
+        role="button"
+        aria-label="toggle section"
+        tabindex="0"
+      >
+        <VPIconChevronRight class="caret-icon" />
+      </div>
+    </div>
 
-    <template v-for="item in items">
+    <p v-else class="title">{{ text }}</p>
+    
+
+    <div v-for="item in items" class="VPMenuItems">
       <VPMenuLink v-if="'link' in item" :item="item" />
-    </template>
+    </div>
   </div>
 </template>
 
@@ -36,6 +82,11 @@ defineProps<{
 }
 
 .title {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
   padding: 0 12px;
   line-height: 32px;
   font-size: 14px;
@@ -44,4 +95,26 @@ defineProps<{
   white-space: nowrap;
   transition: color 0.25s;
 }
+
+.VPMenuGroup.collapsible .title{
+  font-weight: 700;
+  color: var(--vp-c-text-1);
+  cursor: pointer;
+}
+
+.VPMenuGroup.collapsed .VPMenuItems {
+  display: none;
+}
+
+.VPMenuGroup.collapsed .caret-icon {
+  transform: rotate(0);
+}
+
+.caret-icon {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+  transform: rotate(90deg);
+  transition: transform 0.25s;
+}
 </style>

types/default-theme.d.ts

@@ -167,6 +167,7 @@ export namespace DefaultTheme {
 
   export interface NavItemChildren {
     text?: string
+    collapsed?: boolean
     items: NavItemWithLink[]
   }