fix: active root item

astro/src/components/patterns/Sidebar/SidebarController.ts

@@ -53,6 +53,11 @@ export class SidebarController {
     this.backdrop?.addEventListener('click', () => this.close());
     document.addEventListener('keydown', (e) => this.handleKeyDown(e));
     document.addEventListener('sidebar:toggle', () => this.toggle());
+    document.addEventListener('sidebar:versionChange', () => {
+      this.updateRootActiveStates();
+      this.updateRootActiveClasses();
+      this.updateActiveColumns();
+    });
 
     this.setupSubmenuTriggers();
     this.setupBackButtons();
@@ -60,6 +65,7 @@ export class SidebarController {
     this.versionManager?.setup();
     this.initializeFromActiveState();
     this.updateActiveColumns();
+    this.updateRootActiveClasses();
   }
 
   private initializeFromActiveState(): void {
@@ -155,6 +161,30 @@ export class SidebarController {
     }
   }
 
+  private updateRootActiveClasses(): void {
+    // Get the root submenu ID from the initial active path (based on content version)
+    // This represents which section the current page belongs to
+    const rootSubmenuId =
+      this.initialActiveSubmenuPath.length > 1 ? this.initialActiveSubmenuPath[1] : null;
+
+    // Remove all active classes from root submenu triggers across all version menus
+    this.sidebar
+      ?.querySelectorAll('[data-submenu-trigger][data-target-level="1"]')
+      .forEach((trigger) => {
+        trigger.classList.remove('sidebar-nav-item--active');
+      });
+
+    // Add active class to triggers that point to the current page's section
+    // This applies across all version menus
+    if (rootSubmenuId) {
+      this.sidebar
+        ?.querySelectorAll(`[data-target-id="${rootSubmenuId}"][data-target-level="1"]`)
+        .forEach((trigger) => {
+          trigger.classList.add('sidebar-nav-item--active');
+        });
+    }
+  }
+
   private setupBackButtons(): void {
     this.sidebar?.querySelectorAll('[data-back-button]').forEach((button) => {
       button.addEventListener('click', (e) => {
@@ -404,6 +434,10 @@ export class SidebarController {
       this.open();
     }
   }
+
+  public clearVersionWarning(): void {
+    this.versionManager?.clearV3Warning();
+  }
 }
 
 declare global {

astro/src/components/patterns/Sidebar/VersionWarningBanner.astro

@@ -4,16 +4,15 @@ import { Alert, BodyMd } from '@/components/primitives';
 ---
 
 <Alert
-  variant="warning"
+  variant="default"
   dismissible
   dismissLabel="Dismiss warning"
   class="version-warning-banner"
   data-version-warning
 >
   <BodyMd as="p" vMargin={false}>
-    v3 is end-of-life. There is no documentation available. <a href="/support"
-      >Learn more about support</a
-    >
+    Version 3.x is no longer supported and has reached end-of-life. Documentation is no longer
+    available. <a href="/support">Learn more</a>
   </BodyMd>
 </Alert>
 
@@ -35,10 +34,8 @@ import { Alert, BodyMd } from '@/components/primitives';
     }
 
     private init(): void {
-      // Add our custom dismiss handler before the Alert component's handler
       this.dismissButton?.addEventListener('click', () => this.dismiss());
 
-      // Check if warning was dismissed in this session
       if (this.wasDismissed()) {
         this.hide();
       }
@@ -47,14 +44,9 @@ import { Alert, BodyMd } from '@/components/primitives';
     private dismiss(): void {
       sessionStorage.setItem(VersionWarningBanner.STORAGE_KEY, Date.now().toString());
 
-      // Clear the v3 attempt flag in version manager
       const sidebarController = (window as Window & { sidebarController?: SidebarController })
         .sidebarController;
-      if (sidebarController) {
-        // Access the version manager through the controller (we'll need to expose it)
-        const versionManager = (sidebarController as any).versionManager;
-        versionManager?.clearV3Warning();
-      }
+      sidebarController?.clearVersionWarning();
     }
 
     private hide(): void {