feat: implement collapsible sidebar navigation with icons and active item detection

2026-05-30 20:00:44 +08:00
parent 86ff71596d
commit 9cabee4d6d
6 changed files with 168 additions and 30 deletions
@@ -0,0 +1,65 @@
+import assert from "node:assert/strict"
+import { describe, it } from "node:test"
+import ts from "typescript"
+import { readFile } from "node:fs/promises"
+import vm from "node:vm"
+
+async function loadModule() {
+  const source = await readFile(
+    new URL("./navigation-active.ts", import.meta.url),
+    "utf8"
+  )
+  const compiled = ts.transpileModule(source, {
+    compilerOptions: {
+      target: ts.ScriptTarget.ES2017,
+      module: ts.ModuleKind.CommonJS,
+    },
+    fileName: "navigation-active.ts",
+  })
+  const sandbox = {
+    exports: {},
+    module: { exports: {} },
+  }
+  sandbox.exports = sandbox.module.exports
+  vm.runInNewContext(compiled.outputText, sandbox)
+  return sandbox.module.exports
+}
+
+describe("isDashboardNavItemActive", () => {
+  it("matches exact dashboard paths and nested child routes", async () => {
+    const { isDashboardNavItemActive } = await loadModule()
+
+    assert.equal(isDashboardNavItemActive("/dashboard/tickets", "/dashboard/tickets"), true)
+    assert.equal(
+      isDashboardNavItemActive("/dashboard/tickets/123", "/dashboard/tickets"),
+      true
+    )
+    assert.equal(
+      isDashboardNavItemActive("/dashboard/tickets-extra", "/dashboard/tickets"),
+      false
+    )
+  })
+
+  it("only marks the dashboard home item active on the exact dashboard path", async () => {
+    const { isDashboardNavItemActive } = await loadModule()
+
+    assert.equal(isDashboardNavItemActive("/dashboard", "/dashboard"), true)
+    assert.equal(isDashboardNavItemActive("/dashboard/tickets", "/dashboard"), false)
+  })
+})
+
+describe("dashboardNavSectionHasActiveItem", () => {
+  it("detects whether a sidebar group contains the current route", async () => {
+    const { dashboardNavSectionHasActiveItem } = await loadModule()
+    const items = [
+      { url: "/dashboard/tags" },
+      { url: "/dashboard/quick-replies" },
+    ]
+
+    assert.equal(
+      dashboardNavSectionHasActiveItem(items, "/dashboard/quick-replies/create"),
+      true
+    )
+    assert.equal(dashboardNavSectionHasActiveItem(items, "/dashboard/users"), false)
+  })
+})