eising/sshecret
1
0
Fork 0
Code Issues 28 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Set breadcrumb dynamically

Browse Source
This commit is contained in:
Allan Eising
2025-06-18 19:15:12 +02:00
parent 05775a2e1e
commit d55c699549
2 changed files with 15 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/sshecret-admin/src/sshecret_admin/frontend/templates/base/page.html.j2
View File

@ -7,7 +7,7 @@
<div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200"> <div class="p-4 bg-white block sm:flex items-center justify-between border-b border-gray-200">
<nav class="text-sm text-gray-500" aria-label="Breadcrumb"> <nav class="text-sm text-gray-500" aria-label="Breadcrumb">
<sl-breadcrumb> <sl-breadcrumb id="breadcrumbs">
<sl-breadcrumb-item> <sl-breadcrumb-item>
<sl-icon slot="prefix" name="house"></sl-icon> <sl-icon slot="prefix" name="house"></sl-icon>
<a href="/">Home</a> <a href="/">Home</a>

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

@ -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() { function addTreeListener() {
const tree = document.querySelector("sl-tree"); const tree = document.querySelector("sl-tree");
@ -28,6 +41,7 @@ function addTreeListener() {
.then(() => { .then(() => {
masterPane.classList.add("hidden"); masterPane.classList.add("hidden");
detailPane.classList.remove("hidden"); detailPane.classList.remove("hidden");
setBreadcrumb(name);
}); });
} }
}); });