Merge pull request #550 from sboldyreva/claude/collapsible-ecosystems-sidebar-Ho5IR

Collapsible sidebar (ecosystems)

Author: sboldyreva

docs/.vuepress/theme/sidebar/SidebarGroup.vue

@@ -9,23 +9,46 @@
           class="sidebar-group-items"
           v-if="open || !collapsable"
       >
-        <li v-for="child in item?.children">
-          <SidebarSectionHeader
-              v-if="child?.type === 'section-header'"
-              :item="child"
-          />
-          <SidebarLink
-              v-else
-              :closeSidebarDrawer="closeSidebarDrawer"
-              :item="child"
-          />
-        </li>
+        <template v-for="(section, sIdx) in sections" :key="sIdx">
+          <template v-if="section.header">
+            <li>
+              <SidebarSectionHeader
+                  :item="section.header"
+                  :collapsible="true"
+                  :expanded="!collapsedSections[section.key]"
+                  @toggle="toggleSection(section.key)"
+              />
+              <DropdownTransition>
+                <ul
+                    v-if="!collapsedSections[section.key]"
+                    class="sidebar-section-items"
+                >
+                  <li v-for="(child, cIdx) in section.items" :key="cIdx">
+                    <SidebarLink
+                        :closeSidebarDrawer="closeSidebarDrawer"
+                        :item="child"
+                    />
+                  </li>
+                </ul>
+              </DropdownTransition>
+            </li>
+          </template>
+          <template v-else>
+            <li v-for="(child, cIdx) in section.items" :key="cIdx">
+              <SidebarLink
+                  :closeSidebarDrawer="closeSidebarDrawer"
+                  :item="child"
+              />
+            </li>
+          </template>
+        </template>
       </ul>
     </DropdownTransition>
   </div>
 </template>
 
 <script setup>
+import { computed, reactive } from 'vue'
 import SidebarLink from './SidebarLink.vue'
 import SidebarSectionHeader from './SidebarSectionHeader.vue'
 import DropdownTransition from "../components/DropdownTransition.vue";
@@ -52,6 +75,28 @@ const props = defineProps({
     default: () => {}
   }
 })
+
+const sections = computed(() => {
+  const children = props.item?.children || []
+  const result = []
+  let current = { header: null, items: [], key: '__leading__' }
+  for (const child of children) {
+    if (child?.type === 'section-header') {
+      if (current.header || current.items.length) result.push(current)
+      current = { header: child, items: [], key: child.title || `section-${result.length}` }
+    } else {
+      current.items.push(child)
+    }
+  }
+  if (current.header || current.items.length) result.push(current)
+  return result
+})
+
+const collapsedSections = reactive({})
+
+const toggleSection = (key) => {
+  collapsedSections[key] = !collapsedSections[key]
+}
 </script>
 
 <style lang="stylus">
@@ -95,4 +140,10 @@ const props = defineProps({
 .sidebar-group-items
   transition height .1s ease-out
   overflow hidden
+
+.sidebar-section-items
+  padding 0
+  margin 0
+  list-style-type none
+  overflow hidden
 </style>

docs/.vuepress/theme/sidebar/SidebarSectionHeader.vue

@@ -3,12 +3,32 @@ defineProps({
   item: {
     type: Object,
     required: true
+  },
+  collapsible: {
+    type: Boolean,
+    default: false
+  },
+  expanded: {
+    type: Boolean,
+    default: true
   }
 });
+
+defineEmits(['toggle']);
 </script>
 
 <template>
-  <div class="sidebar-section-header">
+  <div
+      class="sidebar-section-header"
+      :class="{ collapsible, expanded }"
+      :role="collapsible ? 'button' : undefined"
+      :tabindex="collapsible ? 0 : undefined"
+      :aria-expanded="collapsible ? expanded : undefined"
+      @click="collapsible && $emit('toggle')"
+      @keydown.enter.prevent="collapsible && $emit('toggle')"
+      @keydown.space.prevent="collapsible && $emit('toggle')"
+  >
+    <span v-if="collapsible" class="section-arrow" aria-hidden="true"></span>
     <img :src="item.icon" class="language-logo" alt="language-logo" loading="lazy" />
     <span class="language-title">{{ item.title }}</span>
   </div>
@@ -24,6 +44,21 @@ defineProps({
   left: -1rem;
 }
 
+.sidebar-section-header.collapsible {
+  cursor: pointer;
+  user-select: none;
+}
+
+.sidebar-section-header.collapsible:hover .language-title {
+  color: #1a73e8;
+}
+
+.sidebar-section-header.collapsible:focus-visible {
+  outline: 2px solid #1a73e8;
+  outline-offset: 2px;
+  border-radius: 4px;
+}
+
 .language-logo {
   max-width: 2rem;
   height: auto;
@@ -35,4 +70,18 @@ defineProps({
   color: #2c3e50;
   letter-spacing: 0.01em;
 }
+
+.section-arrow {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 0.5625rem;
+  background-image: url("../../public/expand-more.svg");
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 1rem 0.5625rem;
+}
+
+.sidebar-section-header.expanded .section-arrow {
+  background-image: url("../../public/expand-more-down.svg");
+}
 </style>