diff --git a/script.js b/script.js
index eedb201..ef8431d 100644
--- a/script.js
+++ b/script.js
@@ -165,9 +165,49 @@ function showLoading(show = true) {
function updateCurrentPathDisplay() {
const pathDisplay = document.getElementById("current-path");
- if (pathDisplay) {
- pathDisplay.textContent = "/" + config.currentPath;
+ if (!pathDisplay) return;
+
+ // Créer la structure de navigation breadcrumb
+ let breadcrumbHTML = '';
+
+ // Toujours commencer par la racine
+ if (config.currentPath) {
+ // Si on n'est pas à la racine, rendre "/" cliquable
+ breadcrumbHTML += '/ ';
+ } else {
+ // Si on est à la racine, afficher "/" sans lien
+ breadcrumbHTML += '/';
}
+
+ // Si on a un chemin, découper et créer les segments
+ if (config.currentPath) {
+ const segments = config.currentPath.split('/').filter(segment => segment.length > 0);
+
+ for (let i = 0; i < segments.length; i++) {
+ const segment = segments[i];
+ const segmentPath = segments.slice(0, i + 1).join('/');
+
+ // Le dernier segment (actuel) n'est pas cliquable
+ if (i === segments.length - 1) {
+ breadcrumbHTML += segment;
+ } else {
+ // Les segments précédents sont cliquables
+ breadcrumbHTML += `${segment} / `;
+ }
+ }
+ }
+
+ pathDisplay.innerHTML = breadcrumbHTML;
+
+ // Ajouter les event listeners aux liens de navigation
+ const pathLinks = pathDisplay.querySelectorAll('.path-segment');
+ pathLinks.forEach(link => {
+ link.addEventListener('click', (e) => {
+ e.preventDefault();
+ const targetPath = link.getAttribute('data-path');
+ loadBucketContents(targetPath, true);
+ });
+ });
}
async function loadBucketContents(path = "", pushToHistory = true) {
diff --git a/style.css b/style.css
index 56aa171..c64da6d 100644
--- a/style.css
+++ b/style.css
@@ -34,6 +34,23 @@ h1 {
margin-bottom: 20px;
}
+/* Styles pour la navigation breadcrumb dans le titre */
+.path-segment {
+ color: #0066cc;
+ text-decoration: none;
+ font-weight: normal;
+ cursor: pointer;
+}
+
+.path-segment:hover {
+ text-decoration: underline;
+ color: #004499;
+}
+
+.path-segment:active {
+ color: #002266;
+}
+
/* Section développement */
.dev-section {
background-color: #f0f0f0;