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
   }
 }