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:
+8
-11
@@ -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) => {
|
||||
|
||||
Reference in New Issue
Block a user