From d52968e697595b25702f63a3b4f94e3537546015 Mon Sep 17 00:00:00 2001
From: Yutaka Kurosaki <y963@royal.ocn.ne.jp>
Date: Thu, 4 Dec 2025 02:42:20 +0900
Subject: [PATCH] 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
---
 .../views/layouts/knowledge-base.blade.php    | 37 ++++++++++++++++++-
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/resources/views/layouts/knowledge-base.blade.php b/src/resources/views/layouts/knowledge-base.blade.php
index eefb8cc..43d3e1c 100644
--- a/src/resources/views/layouts/knowledge-base.blade.php
+++ b/src/resources/views/layouts/knowledge-base.blade.php
@@ -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
             if (document.readyState === 'loading') {
-                document.addEventListener('DOMContentLoaded', restoreSidebarScroll);
+                document.addEventListener('DOMContentLoaded', () => {
+                    restoreSidebarScroll();
+                    highlightCurrentDocument();
+                });
             } else {
                 restoreSidebarScroll();
+                highlightCurrentDocument();
             }
 
             // 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) {
                 if ((e.ctrlKey || e.metaKey) && e.key === 'k') {