Дезайн ыыыы

frontend/js/components/breadcrumbs.js

@@ -0,0 +1,33 @@
+/** Renders a `/`-separated path as clickable breadcrumb segments into `container`. */
+export function renderBreadcrumbs(container, path, onNavigate) {
+  container.innerHTML = "";
+  const parts = path.split("/").filter(Boolean);
+
+  const root = document.createElement("button");
+  root.type = "button";
+  root.className = "breadcrumb-seg";
+  root.textContent = "/";
+  root.addEventListener("click", () => onNavigate("/"));
+  container.appendChild(root);
+
+  let acc = "";
+  parts.forEach((part, i) => {
+    acc += `/${part}`;
+    const isLast = i === parts.length - 1;
+    const seg = document.createElement(isLast ? "span" : "button");
+    seg.className = `breadcrumb-seg ${isLast ? "current" : ""}`;
+    seg.textContent = part;
+    if (!isLast) {
+      const target = acc;
+      seg.type = "button";
+      seg.addEventListener("click", () => onNavigate(target));
+    }
+    container.appendChild(seg);
+    if (!isLast) {
+      const sep = document.createElement("span");
+      sep.className = "breadcrumb-sep";
+      sep.textContent = "/";
+      container.appendChild(sep);
+    }
+  });
+}