kjdskjdks

template/app/components/TreeNode.vue

@@ -4,8 +4,13 @@ import { useTreeState } from '~/composables/useTreeState'
 defineProps({ nodes: Array, depth: { type: Number, default: 0 } })
 
 const router = useRouter()
+const route = useRoute()
 const { collapsed } = useTreeState()
 
+function isActive(path) {
+  return !!path && route.path === path
+}
+
 function getTitle(node) {
   if (node.title === 'index') return 'Index'
   return node.title || node._path?.split('/').pop() || 'Home'
@@ -51,7 +56,12 @@ function visibleChildren(node) {
 
       <!-- Leaf node (no children) -->
       <template v-if="!node.children?.length">
-        <a v-if="node.path" :href="node.path" @click.prevent="navigate(node.path)">
+        <a
+          v-if="node.path"
+          :href="node.path"
+          :class="{ active: isActive(node.path) }"
+          @click.prevent="navigate(node.path)"
+        >
           {{ getTitle(node) }}
         </a>
         <span v-else>{{ getTitle(node) }}</span>
@@ -73,6 +83,7 @@ function visibleChildren(node) {
           <a
             v-if="getSelfTitledChild(node)"
             class="folder-label folder-label--link"
+            :class="{ active: isActive(getSelfTitledChild(node).path) }"
             :href="getSelfTitledChild(node).path"
             @click.prevent="navigate(getSelfTitledChild(node).path)"
           >
@@ -104,6 +115,12 @@ li {
 
 a {
   color: var(--text-link);
+
+  &.active {
+    color: var(--text-primary, currentColor);
+    font-weight: 600;
+    pointer-events: none;
+  }
 }
 
 .folder-row {