feat: style toggle button and code format

docs/.vitepress/config.ts

@@ -57,6 +57,7 @@ function sidebarGuide() {
   return [
     {
       text: 'Introduction',
+      collapsible: true,
       items: [
         { text: 'What is VitePress?', link: '/guide/what-is-vitepress' },
         { text: 'Getting Started', link: '/guide/getting-started' },
@@ -67,22 +68,22 @@ function sidebarGuide() {
         { text: 'Using Vue in Markdown', link: '/guide/using-vue' },
         { text: 'API Reference', link: '/guide/api' },
         { text: 'Deploying', link: '/guide/deploying' }
-      ],
-      collapsible: true
+      ]
     },
     {
       text: 'Theme',
+      collapsible: true,
       items: [
         { text: 'Introduction', link: '/guide/theme-introduction' },
         { text: 'Layout', link: '/guide/theme-layout' },
         { text: 'Homepage', link: '/guide/theme-homepage' },
         { text: 'Footer', link: '/guide/theme-footer' },
         { text: 'Carbon Ads', link: '/guide/theme-carbon-ads' }
-      ],
-      collapsible: true
+      ]
     },
     {
       text: 'Migrations',
+      collapsible: true,
       items: [
         {
           text: 'Migration from VuePress',
@@ -92,8 +93,7 @@ function sidebarGuide() {
           text: 'Migration from VitePress 0.x',
           link: '/guide/migration-from-vitepress-0'
         }
-      ],
-      collapsible: true
+      ]
     }
   ]
 }

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

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
-import { onMounted, ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { DefaultTheme } from '../config'
+import VPIconPlusSquare from './icons/VPIconPlusSquare.vue'
+import VPIconMinusSquare from './icons/VPIconMinusSquare.vue'
 import VPSidebarLink from './VPSidebarLink.vue'
 
 const props = defineProps<{
@@ -10,48 +12,24 @@ const props = defineProps<{
   collapsed?: boolean
 }>()
 
-const collapsed = ref(false)
-const itemsDiv = ref<HTMLDivElement | null>(null)
-const height = ref('')
+const collapsed = ref(!!props.collapsed)
 
-const storeHeight = () => {
-  if (!collapsed.value) height.value = itemsDiv.value?.clientHeight + 'px'
-}
-
-const toggle = () => {
-  if (!props.collapsible) return
-  storeHeight()
+function toggle() {
   collapsed.value = !collapsed.value
 }
-
-onMounted(() => {
-  if (!props.collapsible) return
-  storeHeight()
-  collapsed.value = !!props.collapsed 
-})
 </script>
 
 <template>
-  <section class="VPSidebarGroup">
-    <div class="title" :class="{ collapsible }" @click="toggle">
+  <section class="VPSidebarGroup" :class="{ collapsible, collapsed }">
+    <div class="title" role="button" @click="toggle">
       <h2 class="title-text">{{ text }}</h2>
-      <svg
-        v-if="collapsible"
-        xmlns="http://www.w3.org/2000/svg"
-        class="chevron"
-        :class="{ collapsed }"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          fill-rule="evenodd"
-          d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
-          clip-rule="evenodd"
-        />
-      </svg>
+      <div class="action">
+        <VPIconMinusSquare class="icon minus" />
+        <VPIconPlusSquare class="icon plus" />
+      </div>
     </div>
 
-    <div class="items" :class="{ collapsed }" ref="itemsDiv">
+    <div class="items">
       <template v-for="item in items" :key="item.link">
         <VPSidebarLink :item="item" />
       </template>
@@ -61,46 +39,70 @@ onMounted(() => {
 
 <style scoped>
 .title {
-  padding: 6px 0;
   display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
   z-index: 2;
 }
 
-.title.collapsible {
+.VPSidebarGroup.collapsible .title {
   cursor: pointer;
 }
 
 .title-text {
+  padding-top: 6px;
+  padding-bottom: 6px;
   line-height: 20px;
   font-size: 14px;
   font-weight: 700;
   color: var(--vp-c-text-1);
-  transition: color 0.5s;
 }
 
-.chevron {
-  height: 20px;
-  margin-left: 5px;
-  transition: transform 0.5s;
+.action {
+  display: none;
+  position: relative;
+  margin-right: -8px;
+  border-radius: 4px;
+  width: 32px;
+  height: 32px;
+  color: var(--vp-c-text-3);
+  transition: color 0.25s;
 }
 
-.chevron.collapsed {
-  transform: rotate(-90deg);
+.VPSidebarGroup.collapsible .action {
+  display: block;
 }
 
+.title:hover .action {
+  color: var(--vp-c-text-2);
+}
+
+.icon {
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  width: 16px;
+  height: 16px;
+  fill: currentColor;
+}
+
+.icon.minus { opacity: 1; }
+.icon.plus  { opacity: 0; }
+
+.VPSidebarGroup.collapsed .icon.minus { opacity: 0; }
+.VPSidebarGroup.collapsed .icon.plus  { opacity: 1; }
+
 .items {
-  max-height: v-bind('height');
-  transition: max-height 0.5s;
   overflow: hidden;
 }
 
-.items.collapsed {
-  max-height: 0;
+.VPSidebarGroup.collapsed .items {
   margin-bottom: -22px;
+  max-height: 0;
 }
 
 @media (min-width: 960px) {
-  .items.collapsed {
+  .VPSidebarGroup.collapsed .items {
     margin-bottom: -14px;
   }
 }

src/client/theme-default/components/icons/VPIconMinus.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M22,13H2a1,1,0,0,1,0-2H22a1,1,0,0,1,0,2Z" />
+  </svg>
+</template>

src/client/theme-default/components/icons/VPIconMinusSquare.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2zM20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h8c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+  </svg>
+</template>

src/client/theme-default/components/icons/VPIconPlusSquare.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path d="M19,2H5C3.3,2,2,3.3,2,5v14c0,1.7,1.3,3,3,3h14c1.7,0,3-1.3,3-3V5C22,3.3,20.7,2,19,2z M20,19c0,0.6-0.4,1-1,1H5c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h14c0.6,0,1,0.4,1,1V19z" />
+    <path d="M16,11h-3V8c0-0.6-0.4-1-1-1s-1,0.4-1,1v3H8c-0.6,0-1,0.4-1,1s0.4,1,1,1h3v3c0,0.6,0.4,1,1,1s1-0.4,1-1v-3h3c0.6,0,1-0.4,1-1S16.6,11,16,11z" />
+  </svg>
+</template>

types/default-theme.d.ts

@@ -82,11 +82,19 @@ export namespace DefaultTheme {
   export interface SidebarGroup {
     text: string
     items: SidebarItem[]
-    // If `true`, toggle button is shown.
-    // Default: false
+
+    /**
+     * If `true`, toggle button is shown.
+     *
+     * @default false
+     */
     collapsible?: boolean
-    // If `true`, collapsible group is collapsed by default.
-    // Default: false
+
+    /**
+     * If `true`, collapsible group is collapsed by default.
+     *
+     * @default false
+     */
     collapsed?: boolean
   }