Improve current document highlighting with better URL matching

- Add removal of previous highlighting before applying new one
- Support multiple URL matching strategies (exact, full URL, ends with)
- Add debug logging to troubleshoot highlighting issues
- Reset all links before applying highlight to ensure clean state
This commit is contained in:
2025-12-04 02:45:24 +09:00
parent d52968e697
commit 8ea8b3f6b6

View File

@@ -285,18 +285,37 @@ function restoreSidebarScroll() {
// Highlight current document in sidebar // Highlight current document in sidebar
function highlightCurrentDocument() { function highlightCurrentDocument() {
const sidebar = document.getElementById('kb-sidebar'); const sidebar = document.getElementById('kb-sidebar');
if (!sidebar) return; if (!sidebar) {
console.log('Sidebar not found for highlighting');
return;
}
const currentPath = window.location.pathname; const currentPath = window.location.pathname;
const links = sidebar.querySelectorAll('a'); const links = sidebar.querySelectorAll('a');
links.forEach(link => { console.log('Current path:', currentPath);
if (link.getAttribute('href') === currentPath) { console.log('Found links in sidebar:', links.length);
link.classList.add('bg-indigo-50', 'text-indigo-700', 'font-semibold');
link.classList.remove('text-gray-700', 'hover:bg-gray-100'); links.forEach(link => {
const href = link.getAttribute('href');
// Remove previous highlighting
link.classList.remove('bg-indigo-50', 'text-indigo-700', 'font-semibold');
link.classList.add('text-gray-700');
// Update icon color
const icon = link.querySelector('svg'); const icon = link.querySelector('svg');
if (icon) {
icon.classList.remove('text-indigo-600');
icon.classList.add('text-gray-400', 'group-hover:text-gray-600');
}
// Check if this is the current page
if (href === currentPath || href === window.location.href ||
(href && currentPath && href.endsWith(currentPath))) {
console.log('Matched link:', href, 'with current path:', currentPath);
link.classList.add('bg-indigo-50', 'text-indigo-700', 'font-semibold');
link.classList.remove('text-gray-700');
if (icon) { if (icon) {
icon.classList.remove('text-gray-400', 'group-hover:text-gray-600'); icon.classList.remove('text-gray-400', 'group-hover:text-gray-600');
icon.classList.add('text-indigo-600'); icon.classList.add('text-indigo-600');