Different fixes and improvements

Author: eandreeva-twr

src/components/Sidebar.astro

@@ -51,11 +51,14 @@ function transformItems(items: any[]): any[] {
             }
         }
         
-        // Handle category with link but no label
-        if (item.type === 'category' && item.link?.id && (!item.label || item.label.trim() === '')) {
-            const title = docTitles.get(item.link.id);
-            if (title) {
-                newItem.label = title;
+        // Handle category with link but no label (either link.id or direct id)
+        if (item.type === 'category' && (!item.label || item.label.trim() === '')) {
+            const linkId = item.link?.id || item.id;
+            if (linkId) {
+                const title = docTitles.get(linkId);
+                if (title) {
+                    newItem.label = title;
+                }
             }
         }
         
@@ -79,10 +82,13 @@ function transformItems(items: any[]): any[] {
             newItem.href = newItem.href.replace(/\/+/g, '/');
         }
         
-        // Handle category with link
-        if (item.type === 'category' && item.link?.id && !item.href) {
-            const customSlug = docSlugs.get(item.link.id);
-            newItem.href = `${import.meta.env.BASE_URL}${customSlug || `/${item.link.id}`}`.replace(/\/+/g, '/');
+        // Handle category with link (either link.id or direct id)
+        if (item.type === 'category' && !item.href) {
+            const linkId = item.link?.id || item.id;
+            if (linkId) {
+                const customSlug = docSlugs.get(linkId);
+                newItem.href = `${import.meta.env.BASE_URL}${customSlug || `/${linkId}`}`.replace(/\/+/g, '/');
+            }
         }
         if (item.items) {
             newItem.items = transformItems(item.items);

src/components/SidebarItem.astro

@@ -141,7 +141,9 @@ const textColor = getTextColor(depth, isActive);
 
 <style>
   :global(.sidebar-item-active),
-  :global(.sidebar-item-active:visited) {
+  :global(.sidebar-item-active:visited),
+  :global(.sidebar-item-active) .category-title-link,
+  :global(.sidebar-item-active) .category-title-link:visited {
     color: var(--text-primary) !important;
     /* Removed font-weight change to prevent layout shift/wrapping */
   }
@@ -167,6 +169,10 @@ const textColor = getTextColor(depth, isActive);
     color: var(--text-primary) !important;
   }
 
+  :global(.sidebar-item-hover:hover) .category-title-link {
+    color: var(--text-primary) !important;
+  }
+  
   /* Removed .sidebar-indicator styles as it's no longer used */
 
   :global(.sidebar-toggle-btn:hover) {
@@ -241,11 +247,13 @@ const textColor = getTextColor(depth, isActive);
       });
     });
 
+    // Handle category title clicks
     titleLinks.forEach(link => {
-      // Check if listener already exists
       if (link.hasAttribute('data-listener-added')) return;
       link.setAttribute('data-listener-added', 'true');
 
+      const isNavLink = link.tagName === 'A';
+
       link.addEventListener('click', (e) => {
         const categoryId = link.getAttribute('data-category-id');
         const itemsList = document.querySelector(`.category-items-container[data-category-id="${categoryId}"]`);
@@ -255,17 +263,21 @@ const textColor = getTextColor(depth, isActive);
         if (!itemsList || !svg) return;
 
         const isCurrentlyExpanded = itemsList.classList.contains('expanded');
-        const isNavLink = link.tagName === 'A';
 
-        // For non-nav links (buttons), toggle the category
-        if (!isNavLink) {
+        // For navigation links: always expand if collapsed, then let navigation happen
+        if (isNavLink) {
+          if (!isCurrentlyExpanded) {
+            // Expand the category (don't prevent default - let navigation happen)
+            itemsList.classList.add('expanded');
+            svg.style.transform = 'rotate(90deg)';
+          }
+          // Always allow navigation
+        } 
+        // For buttons: always toggle
+        else {
+          e.preventDefault();
           itemsList.classList.toggle('expanded');
           svg.style.transform = isCurrentlyExpanded ? 'rotate(0deg)' : 'rotate(90deg)';
-        } 
-        // For nav links, expand if collapsed (but don't collapse if expanded - let navigation happen)
-        else if (!isCurrentlyExpanded) {
-          itemsList.classList.add('expanded');
-          svg.style.transform = 'rotate(90deg)';
         }
       });
     });