Test

template/app/components/TreeNode.vue

@@ -1,11 +1,13 @@
-<!-- components/TreeNode.vue -->
 <script setup>
+import { ref } from 'vue'
+
 defineProps({ nodes: Array, depth: { type: Number, default: 0 } })
 
 const router = useRouter()
+const collapsed = ref({})
 
 function getTitle(node) {
-    if (node.title == "index") return "Index"
+  if (node.title == "index") return "Index"
   return node.title || node._path?.split('/').pop() || 'Home';
 }
 
@@ -13,6 +15,10 @@ function navigate(path) {
   if (!path) return
   router.push(path)
 }
+
+function toggle(key) {
+  collapsed.value[key] = !collapsed.value[key]
+}
 </script>
 
 <template>
@@ -27,8 +33,15 @@ function navigate(path) {
       </template>
 
       <template v-else>
-        <span>📁 {{ getTitle(node) }}</span>
-        <TreeNode :nodes="node.children" :depth="depth + 1" />
+        <button class="folder-toggle" @click="toggle(node.path ?? node.title)">
+          <span class="chevron" :class="{ open: !collapsed[node.path ?? node.title] }">›</span>
+          {{ getTitle(node) }}
+        </button>
+        <TreeNode
+          v-if="!collapsed[node.path ?? node.title]"
+          :nodes="node.children"
+          :depth="depth + 1"
+        />
       </template>
 
     </li>
@@ -46,6 +59,36 @@ li {
 }
 
 a {
+  color: var(--text-link);
+}
+
+.folder-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  width: 100%;
+  text-align: left;
+
+  &:hover {
     color: var(--text-link);
+  }
+}
+
+.chevron {
+  display: inline-block;
+  font-style: normal;
+  transition: transform 0.15s ease;
+  transform: rotate(0deg);
+  line-height: 1;
+
+  &.open {
+    transform: rotate(90deg);
+  }
 }
 </style>