@growthbeaker/vscode-help-docs 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@growthbeaker/vscode-help-docs",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "A reusable VS Code webview panel that renders a folder of markdown files with a navigation sidebar",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/webview/main.js

@@ -139,14 +139,17 @@
     const fragment = document.createDocumentFragment();
 
     for (const node of tree) {
-      fragment.appendChild(createNavNode(node));
+      fragment.appendChild(createNavNode(node, 0));
     }
 
     sidebar.appendChild(fragment);
   }
 
   /** Create a DOM element for a nav tree node */
-  function createNavNode(node) {
+  function createNavNode(node, depth) {
+    var basePadding = 16;
+    var depthIndent = depth * 16;
+
     if (node.type === 'folder') {
       const details = document.createElement('details');
       details.className = 'nav-folder';
@@ -156,6 +159,7 @@
 
       const summary = document.createElement('summary');
       summary.className = 'nav-folder-header';
+      summary.style.paddingLeft = (basePadding + depthIndent) + 'px';
       summary.textContent = node.title;
       details.appendChild(summary);
 
@@ -175,7 +179,7 @@
 
       if (node.children) {
         for (const child of node.children) {
-          details.appendChild(createNavNode(child));
+          details.appendChild(createNavNode(child, depth + 1));
         }
       }
 
@@ -183,6 +187,7 @@
     } else {
       const link = document.createElement('a');
       link.className = 'nav-item';
+      link.style.paddingLeft = (basePadding + depthIndent + 16) + 'px';
       link.textContent = node.title;
       link.href = '#';
       link.dataset.path = node.path;

package/src/webview/styles.css

@@ -39,7 +39,7 @@ body {
 
 .nav-folder-header {
   display: block;
-  padding: 6px 16px;
+  padding: 6px 16px 6px 16px;
   cursor: pointer;
   font-weight: 600;
   font-size: 0.85em;
@@ -72,7 +72,7 @@ details[open] > .nav-folder-header::before {
 
 .nav-item {
   display: block;
-  padding: 4px 16px 4px 32px;
+  padding: 4px 16px 4px 32px; /* padding-left overridden dynamically by main.js */
   color: var(--vscode-foreground);
   text-decoration: none;
   font-size: 0.9em;