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.
This commit is contained in:
2026-05-30 19:00:02 +05:00
parent bb35206fff
commit 478d5f3c17
5 changed files with 161 additions and 13 deletions
+8 -11
View File
@@ -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) => {