Add current document highlighting in sidebar navigation
- Highlight active document with indigo background and bold font - Change icon color to indigo for active document - Use JavaScript to match current URL path with sidebar links - Update highlighting on page load and Alpine navigation events - Active document is visually distinct from other items
This commit is contained in:
@@ -282,15 +282,48 @@ function restoreSidebarScroll() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Highlight current document in sidebar
|
||||||
|
function highlightCurrentDocument() {
|
||||||
|
const sidebar = document.getElementById('kb-sidebar');
|
||||||
|
if (!sidebar) return;
|
||||||
|
|
||||||
|
const currentPath = window.location.pathname;
|
||||||
|
const links = sidebar.querySelectorAll('a');
|
||||||
|
|
||||||
|
links.forEach(link => {
|
||||||
|
if (link.getAttribute('href') === currentPath) {
|
||||||
|
link.classList.add('bg-indigo-50', 'text-indigo-700', 'font-semibold');
|
||||||
|
link.classList.remove('text-gray-700', 'hover:bg-gray-100');
|
||||||
|
|
||||||
|
// Update icon color
|
||||||
|
const icon = link.querySelector('svg');
|
||||||
|
if (icon) {
|
||||||
|
icon.classList.remove('text-gray-400', 'group-hover:text-gray-600');
|
||||||
|
icon.classList.add('text-indigo-600');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
// Restore on page load
|
// Restore on page load
|
||||||
if (document.readyState === 'loading') {
|
if (document.readyState === 'loading') {
|
||||||
document.addEventListener('DOMContentLoaded', restoreSidebarScroll);
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
|
restoreSidebarScroll();
|
||||||
|
highlightCurrentDocument();
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
restoreSidebarScroll();
|
restoreSidebarScroll();
|
||||||
|
highlightCurrentDocument();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Also restore on window load (for safety)
|
// Also restore on window load (for safety)
|
||||||
window.addEventListener('load', restoreSidebarScroll);
|
window.addEventListener('load', () => {
|
||||||
|
restoreSidebarScroll();
|
||||||
|
highlightCurrentDocument();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Update highlight after Alpine navigation
|
||||||
|
document.addEventListener('alpine:navigated', highlightCurrentDocument);
|
||||||
|
|
||||||
document.addEventListener('keydown', function(e) {
|
document.addEventListener('keydown', function(e) {
|
||||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||||
|
|||||||
Reference in New Issue
Block a user