From c46746bf55bbccd5d936b0b264dd1ce324ccb6cf Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 17 Apr 2024 15:55:15 -1000
Subject: [PATCH 01/11] refactor(VPSidebarItem): use hasChildren

---
 src/client/theme-default/components/VPSidebarItem.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 59782e0d..42c01699 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -61,11 +61,11 @@ function onCaretClick() {
       class="item"
       :role="itemRole"
       v-on="
-        item.items
+        hasChildren
           ? { click: onItemInteraction, keydown: onItemInteraction }
           : {}
       "
-      :tabindex="item.items && 0"
+      :tabindex="hasChildren ? 0 : undefined"
     >
       <div class="indicator" />
 
@@ -82,7 +82,7 @@ function onCaretClick() {
       <component v-else :is="textTag" class="text" v-html="item.text" />
 
       <div
-        v-if="item.collapsed != null && item.items && item.items.length"
+        v-if="item.collapsed != null && hasChildren"
         class="caret"
         role="button"
         aria-label="toggle section"
@@ -94,7 +94,7 @@ function onCaretClick() {
       </div>
     </div>
 
-    <div v-if="item.items && item.items.length" class="items">
+    <div v-if="hasChildren" class="items">
       <template v-if="depth < 5">
         <VPSidebarItem
           v-for="i in item.items"

From ce416c9bc900f6e3d1c3a08e94856be92b181893 Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 17 Apr 2024 17:29:21 -1000
Subject: [PATCH 02/11] feat(VPSidebarItem): collapsible groups use 'details'
 [#3517, #3804, #3805]

---
 .../components/VPSidebarItem.vue              | 160 +++++++++---------
 .../theme-default/composables/sidebar.ts      |  20 +--
 2 files changed, 84 insertions(+), 96 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 42c01699..40c98b19 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -10,13 +10,10 @@ const props = defineProps<{
 }>()
 
 const {
-  collapsed,
-  collapsible,
   isLink,
   isActiveLink,
   hasActiveLink,
-  hasChildren,
-  toggle
+  hasChildren
 } = useSidebarControl(computed(() => props.item))
 
 const sectionTag = computed(() => (hasChildren.value ? 'section' : `div`))
@@ -31,44 +28,59 @@ const textTag = computed(() => {
     : `h${props.depth + 2}`
 })
 
-const itemRole = computed(() => (isLink.value ? undefined : 'button'))
-
 const classes = computed(() => [
   [`level-${props.depth}`],
-  { collapsible: collapsible.value },
-  { collapsed: collapsed.value },
   { 'is-link': isLink.value },
   { 'is-active': isActiveLink.value },
   { 'has-active': hasActiveLink.value }
 ])
-
-function onItemInteraction(e: MouseEvent | Event) {
-  if ('key' in e && e.key !== 'Enter') {
-    return
-  }
-  !props.item.link && toggle()
-}
-
-function onCaretClick() {
-  props.item.link && toggle()
-}
 </script>
 
 <template>
   <component :is="sectionTag" class="VPSidebarItem" :class="classes">
+    <details
+      v-if="item.text && item.collapsed != null && hasChildren"
+      class="item"
+      :open="!item.collapsed"
+    >
+      <summary>
+        <div class="indicator" />
+        
+        <VPLink
+          v-if="item.link"
+          :tag="linkTag"
+          class="link"
+          :href="item.link"
+          :rel="item.rel"
+          :target="item.target"
+        >
+          <component :is="textTag" class="text" v-html="item.text" />
+        </VPLink>
+        <component v-else :is="textTag" class="text" v-html="item.text" />
+
+        <div class="caret">
+          <span class="vpi-chevron-right caret-icon" />
+        </div>
+      </summary>
+
+      <div class="items">
+        <template v-if="depth < 5">
+          <VPSidebarItem
+            v-for="i in item.items"
+            :key="i.text"
+            :item="i"
+            :depth="depth + 1"
+          />
+        </template>
+      </div>
+    </details>
     <div
-      v-if="item.text"
+      v-else
+      :is="item.text"
       class="item"
-      :role="itemRole"
-      v-on="
-        hasChildren
-          ? { click: onItemInteraction, keydown: onItemInteraction }
-          : {}
-      "
-      :tabindex="hasChildren ? 0 : undefined"
     >
       <div class="indicator" />
-
+      
       <VPLink
         v-if="item.link"
         :tag="linkTag"
@@ -80,21 +92,9 @@ function onCaretClick() {
         <component :is="textTag" class="text" v-html="item.text" />
       </VPLink>
       <component v-else :is="textTag" class="text" v-html="item.text" />
-
-      <div
-        v-if="item.collapsed != null && hasChildren"
-        class="caret"
-        role="button"
-        aria-label="toggle section"
-        @click="onCaretClick"
-        @keydown.enter="onCaretClick"
-        tabindex="0"
-      >
-        <span class="vpi-chevron-right caret-icon" />
-      </div>
     </div>
 
-    <div v-if="hasChildren" class="items">
+    <div v-if="(item.collapsed == null || !item.text) && hasChildren" class="items">
       <template v-if="depth < 5">
         <VPSidebarItem
           v-for="i in item.items"
@@ -112,7 +112,7 @@ function onCaretClick() {
   padding-bottom: 24px;
 }
 
-.VPSidebarItem.collapsed.level-0 {
+.VPSidebarItem.level-0:has(> details:not([open])) {
   padding-bottom: 10px;
 }
 
@@ -122,8 +122,22 @@ function onCaretClick() {
   width: 100%;
 }
 
-.VPSidebarItem.collapsible > .item {
+.VPSidebarItem details summary {
   cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+
+  .link {
+    flex-grow: 0;
+  }
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &::marker {
+    content: '';
+  }
 }
 
 .indicator {
@@ -171,36 +185,30 @@ function onCaretClick() {
   color: var(--vp-c-text-2);
 }
 
-.VPSidebarItem.level-0.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-1.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-2.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-3.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-4.is-link > .item > .link:hover .text,
-.VPSidebarItem.level-5.is-link > .item > .link:hover .text {
-  color: var(--vp-c-brand-1);
-}
-
-.VPSidebarItem.level-0.has-active > .item > .text,
-.VPSidebarItem.level-1.has-active > .item > .text,
-.VPSidebarItem.level-2.has-active > .item > .text,
-.VPSidebarItem.level-3.has-active > .item > .text,
-.VPSidebarItem.level-4.has-active > .item > .text,
-.VPSidebarItem.level-5.has-active > .item > .text,
-.VPSidebarItem.level-0.has-active > .item > .link > .text,
-.VPSidebarItem.level-1.has-active > .item > .link > .text,
-.VPSidebarItem.level-2.has-active > .item > .link > .text,
-.VPSidebarItem.level-3.has-active > .item > .link > .text,
-.VPSidebarItem.level-4.has-active > .item > .link > .text,
-.VPSidebarItem.level-5.has-active > .item > .link > .text {
-  color: var(--vp-c-text-1);
-}
-
-.VPSidebarItem.level-0.is-active > .item .link > .text,
-.VPSidebarItem.level-1.is-active > .item .link > .text,
-.VPSidebarItem.level-2.is-active > .item .link > .text,
-.VPSidebarItem.level-3.is-active > .item .link > .text,
-.VPSidebarItem.level-4.is-active > .item .link > .text,
-.VPSidebarItem.level-5.is-active > .item .link > .text {
+.VPSidebarItem.level-0.is-active > .item > summary .text,
+.VPSidebarItem.level-1.is-active > .item > summary .text,
+.VPSidebarItem.level-2.is-active > .item > summary .text,
+.VPSidebarItem.level-3.is-active > .item > summary .text,
+.VPSidebarItem.level-4.is-active > .item > summary .text,
+.VPSidebarItem.level-5.is-active > .item > summary .text,
+.VPSidebarItem.level-0.is-active > .item > .link > .text,
+.VPSidebarItem.level-1.is-active > .item > .link > .text,
+.VPSidebarItem.level-2.is-active > .item > .link > .text,
+.VPSidebarItem.level-3.is-active > .item > .link > .text,
+.VPSidebarItem.level-4.is-active > .item > .link > .text,
+.VPSidebarItem.level-5.is-active > .item > .link > .text,
+.VPSidebarItem.level-0 .link:hover >.text,
+.VPSidebarItem.level-1 .link:hover >.text,
+.VPSidebarItem.level-2 .link:hover >.text,
+.VPSidebarItem.level-3 .link:hover >.text,
+.VPSidebarItem.level-4 .link:hover >.text,
+.VPSidebarItem.level-5 .link:hover >.text,
+.VPSidebarItem.level-0 .link:focus >.text,
+.VPSidebarItem.level-1 .link:focus >.text,
+.VPSidebarItem.level-2 .link:focus >.text,
+.VPSidebarItem.level-3 .link:focus >.text,
+.VPSidebarItem.level-4 .link:focus >.text,
+.VPSidebarItem.level-5 .link:focus >.text {
   color: var(--vp-c-brand-1);
 }
 
@@ -231,7 +239,7 @@ function onCaretClick() {
   transition: transform 0.25s;
 }
 
-.VPSidebarItem.collapsed .caret-icon {
+.VPSidebarItem > details:not([open]) > summary .caret-icon {
   transform: rotate(0);
 }
 
@@ -243,8 +251,4 @@ function onCaretClick() {
   border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
 }
-
-.VPSidebarItem.collapsed .items {
-  display: none;
-}
 </style>
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index ed060e4d..02510416 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -20,13 +20,11 @@ import {
 import { useData } from './data'
 
 export interface SidebarControl {
-  collapsed: Ref<boolean>
   collapsible: ComputedRef<boolean>
   isLink: ComputedRef<boolean>
   isActiveLink: Ref<boolean>
   hasActiveLink: ComputedRef<boolean>
   hasChildren: ComputedRef<boolean>
-  toggle(): void
 }
 
 export function useSidebar() {
@@ -139,8 +137,6 @@ export function useSidebarControl(
 ): SidebarControl {
   const { page, hash } = useData()
 
-  const collapsed = ref(false)
-
   const collapsible = computed(() => {
     return item.value.collapsed != null
   })
@@ -171,27 +167,15 @@ export function useSidebarControl(
     return !!(item.value.items && item.value.items.length)
   })
 
-  watchEffect(() => {
-    collapsed.value = !!(collapsible.value && item.value.collapsed)
-  })
-
   watchPostEffect(() => {
-    ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
+    isActiveLink.value || hasActiveLink.value
   })
 
-  function toggle() {
-    if (collapsible.value) {
-      collapsed.value = !collapsed.value
-    }
-  }
-
   return {
-    collapsed,
     collapsible,
     isLink,
     isActiveLink,
     hasActiveLink,
-    hasChildren,
-    toggle
+    hasChildren
   }
 }

From b1d85476e7eea1ba84cf308933e60d5394611b90 Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Thu, 18 Apr 2024 07:44:05 -1000
Subject: [PATCH 03/11] refactor(VPSidebarItem): no css nesting [pr #3806]

---
 .../components/VPSidebarItem.vue              | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 40c98b19..e33ab4ab 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -126,18 +126,19 @@ const classes = computed(() => [
   cursor: pointer;
   display: flex;
   justify-content: space-between;
+}
 
-  .link {
-    flex-grow: 0;
-  }
+.VPSidebarItem details summary .link {
+  flex-grow: 0;
+}
 
-  &::-webkit-details-marker {
-    display: none;
-  }
+  
+.VPSidebarItem details summary::-webkit-details-marker {
+  display: none;
+}
 
-  &::marker {
-    content: '';
-  }
+.VPSidebarItem details summary::marker {
+  content: '';
 }
 
 .indicator {

From 1420b95629199a889afd0a737b9940a798985e95 Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 15 May 2024 12:22:00 -1000
Subject: [PATCH 04/11] refactor(VPSidebarItem): use :where() to reduce css
 weight [#3806]

---
 .../components/VPSidebarItem.vue              | 46 ++++---------------
 1 file changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index e33ab4ab..c70d03b8 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -151,10 +151,8 @@ const classes = computed(() => [
   transition: background-color 0.25s;
 }
 
-.VPSidebarItem.level-2.is-active > .item > .indicator,
-.VPSidebarItem.level-3.is-active > .item > .indicator,
-.VPSidebarItem.level-4.is-active > .item > .indicator,
-.VPSidebarItem.level-5.is-active > .item > .indicator {
+
+.VPSidebarItem:is(.level-2, .level-3, .level-4, .level-5).is-active > .item > .indicator {
   background-color: var(--vp-c-brand-1);
 }
 
@@ -177,39 +175,15 @@ const classes = computed(() => [
   color: var(--vp-c-text-1);
 }
 
-.VPSidebarItem.level-1 .text,
-.VPSidebarItem.level-2 .text,
-.VPSidebarItem.level-3 .text,
-.VPSidebarItem.level-4 .text,
-.VPSidebarItem.level-5 .text {
+.VPSidebarItem:is(.level-1, .level-2, .level-3, .level-4, .level-5) .text {
   font-weight: 500;
   color: var(--vp-c-text-2);
 }
 
-.VPSidebarItem.level-0.is-active > .item > summary .text,
-.VPSidebarItem.level-1.is-active > .item > summary .text,
-.VPSidebarItem.level-2.is-active > .item > summary .text,
-.VPSidebarItem.level-3.is-active > .item > summary .text,
-.VPSidebarItem.level-4.is-active > .item > summary .text,
-.VPSidebarItem.level-5.is-active > .item > summary .text,
-.VPSidebarItem.level-0.is-active > .item > .link > .text,
-.VPSidebarItem.level-1.is-active > .item > .link > .text,
-.VPSidebarItem.level-2.is-active > .item > .link > .text,
-.VPSidebarItem.level-3.is-active > .item > .link > .text,
-.VPSidebarItem.level-4.is-active > .item > .link > .text,
-.VPSidebarItem.level-5.is-active > .item > .link > .text,
-.VPSidebarItem.level-0 .link:hover >.text,
-.VPSidebarItem.level-1 .link:hover >.text,
-.VPSidebarItem.level-2 .link:hover >.text,
-.VPSidebarItem.level-3 .link:hover >.text,
-.VPSidebarItem.level-4 .link:hover >.text,
-.VPSidebarItem.level-5 .link:hover >.text,
-.VPSidebarItem.level-0 .link:focus >.text,
-.VPSidebarItem.level-1 .link:focus >.text,
-.VPSidebarItem.level-2 .link:focus >.text,
-.VPSidebarItem.level-3 .link:focus >.text,
-.VPSidebarItem.level-4 .link:focus >.text,
-.VPSidebarItem.level-5 .link:focus >.text {
+.VPSidebarItem.is-active:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5)  > .item > summary .text,
+.VPSidebarItem.is-active:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5)  > .item > .link > .text,
+.VPSidebarItem:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5) .link:hover >.text,
+.VPSidebarItem:is(.level-0, .level-1, .level-2, .level-3, .level-4, .level-5) .link:focus >.text {
   color: var(--vp-c-brand-1);
 }
 
@@ -244,11 +218,7 @@ const classes = computed(() => [
   transform: rotate(0);
 }
 
-.VPSidebarItem.level-1 .items,
-.VPSidebarItem.level-2 .items,
-.VPSidebarItem.level-3 .items,
-.VPSidebarItem.level-4 .items,
-.VPSidebarItem.level-5 .items {
+.VPSidebarItem:is(.level-1, .level-2, .level-3, .level-4, .level-5) .items {
   border-left: 1px solid var(--vp-c-divider);
   padding-left: 16px;
 }

From 91fd45c5e2ffc69ad8fdd58ec301053145c1a020 Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 15 May 2024 12:27:30 -1000
Subject: [PATCH 05/11] chore(VPSidebarItem): correct hover style...

https://github.com/vuejs/vitepress/pull/3806#discussion_r1581399647
---
 docs/.vitepress/config/en.ts                  | 22 +++++++++++++++++--
 .../components/VPSidebarItem.vue              |  8 ++-----
 2 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
index 1f619347..ee306b58 100644
--- a/docs/.vitepress/config/en.ts
+++ b/docs/.vitepress/config/en.ts
@@ -60,14 +60,32 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
   return [
     {
       text: 'Introduction',
-      collapsed: false,
+      collapsed: true,
       items: [
-        { text: 'What is VitePress?', link: 'what-is-vitepress' },
+        {
+          text: 'Group heading linked to "What is VitePress?"',
+          link: 'what-is-vitepress',
+          collapsed: true,
+          items: [
+            {
+              text: 'Another group heading linked to "What is VitePress?"',
+              link: 'what-is-vitepress',
+              collapsed: true,
+              items: [
+                {
+                  text: 'What is VitePress?',
+                  link: 'what-is-vitepress'
+                }
+              ]
+            }
+          ]
+        },
         { text: 'Getting Started', link: 'getting-started' },
         { text: 'Routing', link: 'routing' },
         { text: 'Deploy', link: 'deploy' }
       ]
     },
+    { text: 'What is VitePress?', link: 'what-is-vitepress' },
     {
       text: 'Writing',
       collapsed: false,
diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index c70d03b8..08a74dc1 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -200,12 +200,8 @@ const classes = computed(() => [
   flex-shrink: 0;
 }
 
-.item:hover .caret {
-  color: var(--vp-c-text-2);
-}
-
-.item:hover .caret:hover {
-  color: var(--vp-c-text-1);
+.item summary:hover .caret {
+  color: var(--vp-c-text-1)
 }
 
 .caret-icon {

From b96cc8fd12f6168b6fcf9becfd4f4aed728743fe Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 15 May 2024 12:40:06 -1000
Subject: [PATCH 06/11] chore(VPSidebarItem): fix regression: active
 collapsible has indicator

---
 src/client/theme-default/components/VPSidebarItem.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 08a74dc1..186887e6 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -126,6 +126,7 @@ const classes = computed(() => [
   cursor: pointer;
   display: flex;
   justify-content: space-between;
+  position: relative;
 }
 
 .VPSidebarItem details summary .link {
@@ -151,8 +152,8 @@ const classes = computed(() => [
   transition: background-color 0.25s;
 }
 
-
-.VPSidebarItem:is(.level-2, .level-3, .level-4, .level-5).is-active > .item > .indicator {
+.VPSidebarItem:is(.level-2, .level-3, .level-4, .level-5).is-active > .item > .indicator,
+.VPSidebarItem:is(.level-2, .level-3, .level-4, .level-5).is-active > details > summary .indicator {
   background-color: var(--vp-c-brand-1);
 }
 

From 8dee2681e15c704eeb71414cbc609b568f29366f Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 15 May 2024 14:50:45 -1000
Subject: [PATCH 07/11] chore(VPSidebarItem): revert 3805 work: active groups
 toggle open

---
 .../components/VPSidebarItem.vue              | 20 +++++++++++++++----
 .../theme-default/composables/sidebar.ts      | 19 ++++++++++++++++--
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 186887e6..703eb408 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -10,10 +10,13 @@ const props = defineProps<{
 }>()
 
 const {
+  collapsed,
+  collapsible,
   isLink,
   isActiveLink,
   hasActiveLink,
-  hasChildren
+  hasChildren,
+  handleToggle,
 } = useSidebarControl(computed(() => props.item))
 
 const sectionTag = computed(() => (hasChildren.value ? 'section' : `div`))
@@ -34,14 +37,23 @@ const classes = computed(() => [
   { 'is-active': isActiveLink.value },
   { 'has-active': hasActiveLink.value }
 ])
+
+function onToggle(payload: ToggleEvent): void {
+  handleToggle(payload.newState)
+}
 </script>
 
 <template>
   <component :is="sectionTag" class="VPSidebarItem" :class="classes">
+    <!-- @TODO @toggle TS error blocked by
+      https://github.com/vuejs/core/pull/10938.
+      See also https://github.com/vuejs/core/issues/10928
+    -->
     <details
-      v-if="item.text && item.collapsed != null && hasChildren"
+      v-if="item.text && collapsible && hasChildren"
       class="item"
-      :open="!item.collapsed"
+      :open="!collapsed"
+      @toggle="onToggle"
     >
       <summary>
         <div class="indicator" />
@@ -94,7 +106,7 @@ const classes = computed(() => [
       <component v-else :is="textTag" class="text" v-html="item.text" />
     </div>
 
-    <div v-if="(item.collapsed == null || !item.text) && hasChildren" class="items">
+    <div v-if="(!collapsible || !item.text) && hasChildren" class="items">
       <template v-if="depth < 5">
         <VPSidebarItem
           v-for="i in item.items"
diff --git a/src/client/theme-default/composables/sidebar.ts b/src/client/theme-default/composables/sidebar.ts
index 02510416..38ce1790 100644
--- a/src/client/theme-default/composables/sidebar.ts
+++ b/src/client/theme-default/composables/sidebar.ts
@@ -20,11 +20,13 @@ import {
 import { useData } from './data'
 
 export interface SidebarControl {
+  collapsed: Ref<boolean>
   collapsible: ComputedRef<boolean>
   isLink: ComputedRef<boolean>
   isActiveLink: Ref<boolean>
   hasActiveLink: ComputedRef<boolean>
   hasChildren: ComputedRef<boolean>
+  handleToggle(newState: string): void
 }
 
 export function useSidebar() {
@@ -137,6 +139,8 @@ export function useSidebarControl(
 ): SidebarControl {
   const { page, hash } = useData()
 
+  const collapsed = ref(false)
+
   const collapsible = computed(() => {
     return item.value.collapsed != null
   })
@@ -167,15 +171,26 @@ export function useSidebarControl(
     return !!(item.value.items && item.value.items.length)
   })
 
+  watchEffect(() => {
+    collapsed.value = !!(collapsible.value && item.value.collapsed)
+  })
+
   watchPostEffect(() => {
-    isActiveLink.value || hasActiveLink.value
+    console.log(item.value.text, isActiveLink.value, hasActiveLink.value)
+    ;(isActiveLink.value || hasActiveLink.value) && (collapsed.value = false)
   })
 
+  function handleToggle(newState: string) {
+    collapsed.value = newState === 'closed'
+  }
+
   return {
+    collapsed,
     collapsible,
     isLink,
     isActiveLink,
     hasActiveLink,
-    hasChildren
+    hasChildren,
+    handleToggle
   }
 }

From 16beebe7e37f646f740c507a3a2102940ca8d4a6 Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Wed, 15 May 2024 15:14:06 -1000
Subject: [PATCH 08/11] test(multi-sidebar): update for new markup

---
 __tests__/e2e/multi-sidebar/index.test.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/__tests__/e2e/multi-sidebar/index.test.ts b/__tests__/e2e/multi-sidebar/index.test.ts
index b6482bdb..7b290090 100644
--- a/__tests__/e2e/multi-sidebar/index.test.ts
+++ b/__tests__/e2e/multi-sidebar/index.test.ts
@@ -5,7 +5,8 @@ describe('test multi sidebar sort root', () => {
 
   test('using / sidebar', async () => {
     const sidebarLocator = page.locator(
-      '.VPSidebarItem.level-0 > .item > .text'
+      '.VPSidebarItem.level-0 > .item > summary > .text, \
+      .VPSidebarItem.level-0 > .item > .text'
     )
 
     const sidebarContent = await sidebarLocator.allTextContents()

From c3b1c776aab60194eaae76dd9db0a9524b5737ad Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Mon, 27 May 2024 12:27:27 -1000
Subject: [PATCH 09/11] fix(sidebar): revert dev qa content

---
 docs/.vitepress/config/en.ts | 22 ++--------------------
 1 file changed, 2 insertions(+), 20 deletions(-)

diff --git a/docs/.vitepress/config/en.ts b/docs/.vitepress/config/en.ts
index ee306b58..1f619347 100644
--- a/docs/.vitepress/config/en.ts
+++ b/docs/.vitepress/config/en.ts
@@ -60,32 +60,14 @@ function sidebarGuide(): DefaultTheme.SidebarItem[] {
   return [
     {
       text: 'Introduction',
-      collapsed: true,
+      collapsed: false,
       items: [
-        {
-          text: 'Group heading linked to "What is VitePress?"',
-          link: 'what-is-vitepress',
-          collapsed: true,
-          items: [
-            {
-              text: 'Another group heading linked to "What is VitePress?"',
-              link: 'what-is-vitepress',
-              collapsed: true,
-              items: [
-                {
-                  text: 'What is VitePress?',
-                  link: 'what-is-vitepress'
-                }
-              ]
-            }
-          ]
-        },
+        { text: 'What is VitePress?', link: 'what-is-vitepress' },
         { text: 'Getting Started', link: 'getting-started' },
         { text: 'Routing', link: 'routing' },
         { text: 'Deploy', link: 'deploy' }
       ]
     },
-    { text: 'What is VitePress?', link: 'what-is-vitepress' },
     {
       text: 'Writing',
       collapsed: false,

From d385f290a1e924373d68d83f98d33daa0e9047fa Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Mon, 24 Jun 2024 15:10:14 -1000
Subject: [PATCH 10/11] chore(VPSidebarItem): drop comment. no longer blocked
 by vue core bug

---
 src/client/theme-default/components/VPSidebarItem.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 703eb408..56412ffe 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -45,10 +45,6 @@ function onToggle(payload: ToggleEvent): void {
 
 <template>
   <component :is="sectionTag" class="VPSidebarItem" :class="classes">
-    <!-- @TODO @toggle TS error blocked by
-      https://github.com/vuejs/core/pull/10938.
-      See also https://github.com/vuejs/core/issues/10928
-    -->
     <details
       v-if="item.text && collapsible && hasChildren"
       class="item"

From 1eb17d1a02c8cec3b514dc4e7901fc29c881b7cf Mon Sep 17 00:00:00 2001
From: Henry Bley-Vroman <olets@olets.dev>
Date: Mon, 24 Jun 2024 15:15:11 -1000
Subject: [PATCH 11/11] chore(VPSidebarItem): whitespace

---
 src/client/theme-default/components/VPSidebarItem.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/theme-default/components/VPSidebarItem.vue b/src/client/theme-default/components/VPSidebarItem.vue
index 56412ffe..b6096314 100644
--- a/src/client/theme-default/components/VPSidebarItem.vue
+++ b/src/client/theme-default/components/VPSidebarItem.vue
@@ -88,7 +88,7 @@ function onToggle(payload: ToggleEvent): void {
       class="item"
     >
       <div class="indicator" />
-      
+
       <VPLink
         v-if="item.link"
         :tag="linkTag"