Test

template/app/assets/css/global.css

@@ -2,7 +2,7 @@
 :root {
   --bg-body: #f4f1ee;
   --bg-elevated: #faf8f5;
-  --bg-sidebar: #f4f1ee;
+  --bg-sidebar: #d1cfcd;
   --text-primary: #1e1a2e;
   --text-heading: #0f0c1a;
   --text-secondary: #3d3457;

template/app/components/PageTree.vue

@@ -14,8 +14,11 @@ const { data: pages } = await useAsyncData('nav', () =>
 
 <style lang="scss" scoped>
 nav {
-  padding: 40px;
   box-shadow: var(--shadow-elevation-medium);
     background-color: var(--bg-sidebar);
+
+    h2 {
+      padding: 20px;
+    }
 }
 </style>

template/app/components/TreeNode.vue

@@ -51,7 +51,7 @@ function visibleChildren(node) {
 </script>
 
 <template>
-  <ul :style="{ paddingLeft: depth ? '1rem' : '0' }">
+  <ul>
     <li v-for="node in nodes" :key="node.path ?? node.title">
 
       <!-- Leaf node (no children) -->
@@ -59,17 +59,27 @@ function visibleChildren(node) {
         <a
           v-if="node.path"
           :href="node.path"
+          class="row"
           :class="{ active: isActive(node.path) }"
+          :style="{ paddingLeft: `calc(${depth} * 1rem + 2rem)` }"
           @click.prevent="navigate(node.path)"
         >
           {{ getTitle(node) }}
         </a>
-        <span v-else>{{ getTitle(node) }}</span>
+        <span
+          v-else
+          class="row"
+          :style="{ paddingLeft: `calc(${depth} * 1rem + 2rem)` }"
+        >{{ getTitle(node) }}</span>
       </template>
 
       <!-- Folder node -->
       <template v-else>
-        <div class="folder-row">
+        <div
+          class="row folder-row"
+          :class="{ active: isActive(getSelfTitledChild(node)?.path) }"
+          :style="{ paddingLeft: `calc(${depth} * 1rem + 2rem)` }"
+        >
           <!-- Chevron toggle (always present) -->
           <button
             class="folder-toggle"
@@ -83,7 +93,6 @@ 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)"
           >
@@ -106,27 +115,50 @@ function visibleChildren(node) {
 <style lang="scss" scoped>
 ul {
   list-style: none;
-  padding-left: 0;
+  padding: 0;
+  margin: 0;
 }
 
 li {
   margin-bottom: 0;
 }
 
-a {
+// Shared row styles — applied to both <a> leaf nodes and .folder-row divs
-  color: var(--text-link);
+a.row {
-
+  border: none;
-  &.active {
-    color: var(--text-primary, currentColor);
-    font-weight: 600;
-    pointer-events: none;
-  }
 }
 
-.folder-row {
+.row {
   display: flex;
   align-items: center;
+  width: 100%;
+  padding-right: 0.4rem;
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+  box-sizing: border-box;
+  border-radius: 4px;
+  text-decoration: none;
+  color: var(--text-link);
+
+  a {
+    border: none;
+  }
+
+  &.active {
+    background-color: var(--bg-body);
+    color: var(--text-heading, currentColor);
+    pointer-events: none;
+  }
+
+  &:not(.active):hover {
+    background-color: var(--bg-hover, rgba(0, 0, 0, 0.04));
+  }
+}
+
+// Folder-specific row layout
+.folder-row {
   gap: 0.2rem;
+  cursor: default;
 }
 
 .folder-toggle {
@@ -148,16 +180,11 @@ a {
 
 .folder-label {
   flex: 1;
-  cursor: default;
 
   &--link {
     color: var(--text-link);
     cursor: pointer;
     text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
   }
 }