Unbold nested sidebar group labels and auto-expand current page group

- Fix CSS selector to properly target .large class in nested details
- Auto-expand sidebar group when navigating to that page
- Click group heading navigates to page top (not anchor)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Kyle McLaren

src/components/Head.astro

@@ -188,17 +188,15 @@ const breadcrumbSchema = {
 <!-- Sidebar group navigation: click heading to expand and navigate to page -->
 <script>
   function initSidebarNavigation() {
+    const currentPath = window.location.pathname;
+
     // Find all nested sidebar groups within API Reference
     const sidebarGroups = document.querySelectorAll('nav[aria-label="Main"] details details');
 
     sidebarGroups.forEach((details) => {
       const summary = details.querySelector(':scope > summary');
       if (!summary) return;
 
-      // Skip if already initialized
-      if (summary.dataset.navInit) return;
-      summary.dataset.navInit = 'true';
-
       // Find the first link within this group to determine the page URL
       const firstLink = details.querySelector(':scope > ul a[href]');
       if (!firstLink) return;
@@ -208,6 +206,15 @@ const breadcrumbSchema = {
       const pageUrl = href.split('#')[0];
       if (!pageUrl) return;
 
+      // Auto-expand if current page matches this group's page
+      if (currentPath === pageUrl || currentPath === pageUrl.replace(/\/$/, '')) {
+        details.setAttribute('open', '');
+      }
+
+      // Skip click handler setup if already initialized
+      if (summary.dataset.navInit) return;
+      summary.dataset.navInit = 'true';
+
       // Add click handler to summary
       summary.addEventListener('click', (e) => {
         // Allow normal toggle behavior with modifier keys
@@ -217,8 +224,6 @@ const breadcrumbSchema = {
         if (!details.open) {
           e.preventDefault();
           e.stopPropagation();
-          // Manually open the details element
-          details.setAttribute('open', '');
           // Navigate to the page (without anchor hash)
           window.location.href = pageUrl;
         }

src/styles/custom.css

@@ -1711,12 +1711,16 @@ h2.method-title {
    Sidebar API Group Labels - Unbold nested group headings
    ============================================================================ */
 
-/* Unbold sidebar group labels for API Reference nested groups */
-.sidebar-content .top-level > li > details > ul details > summary span {
+/* Target nested details (e.g., Sprites, Checkpoints inside API Reference) */
+/* The .large class inside these should match regular link styling */
+.sidebar details details summary .large {
   font-weight: 400 !important;
+  font-size: var(--sl-text-sm) !important;
+  color: var(--sl-color-gray-2) !important;
 }
 
-/* Alternative broader selector for nested details summaries */
-nav[aria-label="Main"] details details summary span {
-  font-weight: 400 !important;
+@media (min-width: 50rem) {
+  .sidebar details details summary .large {
+    font-size: var(--sl-text-sm) !important;
+  }
 }