diff --git a/views/layouts/base.html b/views/layouts/base.html index 0457026..f9499ea 100644 --- a/views/layouts/base.html +++ b/views/layouts/base.html @@ -1,6 +1,7 @@ {{ define "base" }} + @@ -34,81 +35,102 @@ - + + -
+
-
+
- IronBuckets + IronBuckets
- Cluster + :class="collapsed ? '!opacity-0 !h-0 !overflow-hidden !mb-0' : ''"> + Cluster
- + Overview - + Drives
- Access + :class="collapsed ? '!opacity-0 !h-0 !overflow-hidden !mt-2 !mb-0' : ''"> + Access
- + Users - + Groups - + Buckets
- System + :class="collapsed ? '!opacity-0 !h-0 !overflow-hidden !mt-2 !mb-0' : ''"> + System
- + Settings
- + Logout @@ -117,17 +139,19 @@
-
+
-
+
Cluster Online - +
- +
@@ -145,10 +169,40 @@ lucide.createIcons(); // Re-init icons on HTMX content swaps - document.body.addEventListener('htmx:afterSwap', function(evt) { + document.body.addEventListener('htmx:afterSwap', function (evt) { lucide.createIcons(); }); + + // Update sidebar active state on navigation + document.body.addEventListener('htmx:pushedIntoHistory', function (evt) { + const path = window.location.pathname; + const links = document.querySelectorAll('.sidebar-nav-link'); + + links.forEach(link => { + const href = link.getAttribute('href'); + // Simple exact match or startswith for sub-paths if needed. + // For now, exact match or /users matching /users/create is good practice, + // but let's stick to exact logic or simple logic matching the Go template: + // Go template used exact match mostly. + + let isActive = false; + if (href === '/' && path === '/') { + isActive = true; + } else if (href !== '/' && path.startsWith(href)) { + isActive = true; + } + + if (isActive) { + link.classList.remove('text-zinc-400', 'hover:text-white', 'hover:bg-white/5'); + link.classList.add('bg-white/10', 'text-white'); + } else { + link.classList.add('text-zinc-400', 'hover:text-white', 'hover:bg-white/5'); + link.classList.remove('bg-white/10', 'text-white'); + } + }); + }); + {{ end }}