Add folder icon

Resolves #2741

Author: Gerrit0

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### Features
 
 -   Added `headings` option to control optional headings, #2729.
+-   Added a folder icon to page navigation elements which are not links, #2741.
 
 ### Bug Fixes
 

scripts/build_themes.js

@@ -2,7 +2,7 @@
 const esbuild = require("esbuild");
 const fs = require("fs");
 
-const watch = process.argv.slice(2).includes("--watch");
+const watch = process.argv.slice(2).some((t) => t == "--watch" || t == "-w");
 
 // It's convenient to be able to build the themes in watch mode without rebuilding the whole docs
 // to test some change to the frontend JS.

src/lib/output/themes/default/assets/typedoc/Navigation.ts

@@ -103,7 +103,8 @@ function addNavText(
         }
         a.appendChild(document.createElement("span")).textContent = el.text;
     } else {
-        parent.appendChild(document.createElement("span")).textContent =
-            el.text;
+        const span = parent.appendChild(document.createElement("span"));
+        span.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" class="tsd-kind-icon"><use href="#icon-folder"></use></svg>`;
+        span.appendChild(document.createElement("span")).textContent = el.text;
     }
 }

src/lib/output/themes/default/partials/icon.tsx

@@ -47,7 +47,7 @@ export function buildRefIcons<T extends Record<string, () => JSX.Element>>(
 }
 
 export const icons: Record<
-    ReflectionKind | "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor",
+    ReflectionKind | "chevronDown" | "checkbox" | "menu" | "search" | "chevronSmall" | "anchor" | "folder",
     () => JSX.Element
 > = {
     [ReflectionKind.Accessor]: () =>
@@ -186,14 +186,21 @@ export const icons: Record<
         ),
     [ReflectionKind.Document]: () =>
         kindIcon(
-            <g stroke="var(--color-text)" fill="var(--color-icon-background)">
-                <polygon points="6,5 6,19 18,19, 18,9 15,5" />
-                <line x1="9" y1="9" x2="14" y2="9" />
+            <g stroke="var(--color-text)" fill="none" stroke-width="1.5">
+                <polygon points="6,5 6,19 18,19, 18,10 13,5" />
+                <line x1="9" y1="9" x2="13" y2="9" />
                 <line x1="9" y1="12" x2="15" y2="12" />
                 <line x1="9" y1="15" x2="15" y2="15" />
             </g>,
             "var(--color-document)",
         ),
+    folder: () =>
+        kindIcon(
+            <g stroke="var(--color-text)" fill="none" stroke-width="1.5">
+                <polygon points="5,5 10,5 12,8 19,8 19,18 5,18" />
+            </g>,
+            "var(--color-document)",
+        ),
     chevronDown: () => (
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
             <path