From 478d5f3c17c355c018221db6d7cad646deec359a Mon Sep 17 00:00:00 2001 From: Enciphered Date: Sat, 30 May 2026 19:00:02 +0500 Subject: [PATCH] feat: implement responsive mobile navigation header and wiki sidebar drawer - Refactored templates/base.html to hide navigation on mobile and expose a hamburger menu button. - Built a right-aligned sliding mobile menu drawer sheet in base.html. - Hidden the documentation sidebar in templates/docs/sidebar.html by default on mobile, placing it inside a left-aligned sliding drawer sheet. - Added a floating 'Explore Guides' directory trigger bar at the top of doc pages on mobile. - Updated static/js/components.js to apply active route highlighting globally to both desktop and mobile sidebars. --- static/js/components.js | 19 +++++------ templates/base.html | 60 ++++++++++++++++++++++++++++++++++- templates/docs/index.html | 14 +++++++++ templates/docs/logging.html | 18 +++++++++++ templates/docs/sidebar.html | 63 ++++++++++++++++++++++++++++++++++++- 5 files changed, 161 insertions(+), 13 deletions(-) diff --git a/static/js/components.js b/static/js/components.js index 421465f..906120b 100644 --- a/static/js/components.js +++ b/static/js/components.js @@ -626,17 +626,14 @@ document.addEventListener('DOMContentLoaded', () => { // --- SIDEBAR NAVIGATION ACTIVE HIGHLIGHTING --- const currentPath = window.location.pathname; - const sidebar = document.getElementById('wiki-sidebar'); - if (sidebar) { - sidebar.querySelectorAll('a[data-wiki-path]').forEach(link => { - const path = link.getAttribute('data-wiki-path'); - if (currentPath === path) { - link.className = 'flex items-center px-3 py-2 text-xs font-semibold rounded-lg bg-indigo-600/20 text-indigo-400 border border-indigo-500/10 transition'; - } else { - link.className = 'flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-accent hover:text-accent-foreground transition'; - } - }); - } + document.querySelectorAll('a[data-wiki-path]').forEach(link => { + const path = link.getAttribute('data-wiki-path'); + if (currentPath === path) { + link.className = 'flex items-center px-3 py-2 text-xs font-semibold rounded-lg bg-indigo-600/20 text-indigo-400 border border-indigo-500/10 transition'; + } else { + link.className = 'flex items-center px-3 py-2 text-xs font-semibold text-muted-foreground hover:text-white rounded-lg hover:bg-secondary transition'; + } + }); // --- CUSTOM SELECT DROPDOWN LOGIC --- document.addEventListener('click', (event) => { diff --git a/templates/base.html b/templates/base.html index ff72c1e..7444d88 100644 --- a/templates/base.html +++ b/templates/base.html @@ -48,7 +48,7 @@ -