Set breadcrumb dynamically

packages/sshecret-admin/src/sshecret_admin/frontend/templates/clients/partials/tree_event.js

@@ -1,3 +1,16 @@
+function setBreadcrumb(name) {
+  // Set the current client name as the final breadcrumb
+  const breadcrumbs = document.getElementById("breadcrumbs");
+  const existingNode = document.getElementById("bc-dynamic-client");
+  if (existingNode) {
+    breadcrumbs.removeChild(existingNode);
+  }
+  const newCrumb = document.createElement("sl-breadcrumb-item");
+  newCrumb.setAttribute("id", "bc-dynamic-client");
+  const bcTitle = document.createTextNode(name);
+  newCrumb.appendChild(bcTitle);
+  breadcrumbs.appendChild(newCrumb);
+}
 function addTreeListener() {
   const tree = document.querySelector("sl-tree");
 
@@ -28,6 +41,7 @@ function addTreeListener() {
         .then(() => {
           masterPane.classList.add("hidden");
           detailPane.classList.remove("hidden");
+          setBreadcrumb(name);
         });
     }
   });