Add version picker to side menu

projects/www/src/app/components/menu.component.ts

@@ -12,11 +12,18 @@ import { RouterLink, RouterLinkActive } from '@angular/router';
 import { GuideSectionComponent } from './guide-section.component';
 import { GuideMenuService } from '../services/guide-menu.service';
 import { DOCUMENT } from '@angular/common';
+import { VersionNavigationComponent } from './version-navigation.component';
 
 @Component({
   selector: 'ngrx-menu',
   standalone: true,
-  imports: [MatIconModule, RouterLink, RouterLinkActive, GuideSectionComponent],
+  imports: [
+    MatIconModule,
+    RouterLink,
+    RouterLinkActive,
+    GuideSectionComponent,
+    VersionNavigationComponent,
+  ],
   template: `
     <div class="mobile-nav-bar">
       <button class="menu-toggle" #toggleBtnRef (click)="toggleMenu()">
@@ -32,6 +39,7 @@ import { DOCUMENT } from '@angular/common';
         <img src="/ngrx-logo-pink.svg" alt="ngrx logo" />
         NgRx
       </a>
+      <ngrx-version-navigation />
       <hr />
       <!--      <a-->
       <!--        routerLink="/workshops"-->

projects/www/src/app/components/version-navigation.component.ts

@@ -0,0 +1,131 @@
+import {
+  Component,
+  inject,
+  signal,
+  ElementRef,
+  HostListener,
+} from '@angular/core';
+import {
+  NavigationNode,
+  VersionInfoService,
+} from '../services/versionInfo.service';
+
+import { toSignal } from '@angular/core/rxjs-interop';
+
+@Component({
+  selector: 'ngrx-version-navigation',
+  template: `
+    @if (versions() && versions().length > 0) {
+    <div class="version-navigation">
+      <button
+        (click)="toggleVisibility()"
+        class="version-toggle-btn"
+        type="button"
+      >
+        <span>v{{ currentVersion }}</span>
+        <span class="arrow-icon" [class.rotated]="isVisible()">▼</span>
+      </button>
+
+      <div class="version-list" [class.hidden]="!isVisible()">
+        <ul>
+          @for (version of versions(); track version.title) {
+          <li>
+            <a [href]="version.url">
+              {{ version.title }}
+            </a>
+          </li>
+          }
+        </ul>
+      </div>
+    </div>
+    }
+  `,
+  styles: [
+    `
+      .version-toggle-btn {
+        width: 100%;
+        padding: 0.5rem 1rem;
+        background-color: #241b28;
+        color: #ffffffa3;
+        border: none;
+        cursor: pointer;
+        font-size: 0.9rem;
+        transition: background-color 0.2s ease;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+
+      .arrow-icon {
+        display: inline-block;
+        transition: transform 0.3s ease;
+        font-size: 0.6rem;
+      }
+
+      .arrow-icon.rotated {
+        transform: rotate(180deg);
+      }
+
+      .version-toggle-btn:hover {
+        background-color: #2b1f31;
+      }
+
+      .version-list {
+        background-color: #0d0a0f;
+      }
+
+      .version-list.hidden {
+        display: none;
+      }
+
+      .version-list ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+      }
+
+      .version-list li {
+        border-bottom: 1px solid #17111a;
+        font-size: 0.9rem;
+      }
+
+      .version-list li:last-child {
+        border-bottom: none;
+      }
+
+      .version-list a {
+        display: block;
+        padding: 0.25rem 1rem;
+        text-decoration: none;
+        color: #ffffffa3;
+        transition: background-color 0.2s ease;
+      }
+
+      .version-list a:hover {
+        background-color: #2b1f31;
+      }
+    `,
+  ],
+})
+export class VersionNavigationComponent {
+  private versionInfoService = inject(VersionInfoService);
+  private elementRef = inject(ElementRef);
+
+  public versions = toSignal(this.versionInfoService.getVersions(), {
+    initialValue: [] as NavigationNode[],
+  });
+
+  public currentVersion = this.versionInfoService.getCurrentVersion();
+  public isVisible = signal(false);
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: Event): void {
+    if (!this.elementRef.nativeElement.contains(event.target as Node)) {
+      this.isVisible.set(false);
+    }
+  }
+
+  public toggleVisibility(): void {
+    this.isVisible.update((visible) => !visible);
+  }
+}

projects/www/src/app/data/versionInfo.json

@@ -0,0 +1,73 @@
+{
+  "currentVersion": "21",
+  "docVersions": [
+    {
+      "title": "v20",
+      "url": "https://v20.ngrx.io"
+    },
+    {
+      "title": "v19",
+      "url": "https://v19.ngrx.io"
+    },
+    {
+      "title": "v18",
+      "url": "https://v18.ngrx.io"
+    },
+    {
+      "title": "v17",
+      "url": "https://v17.ngrx.io"
+    },
+    {
+      "title": "v16",
+      "url": "https://v16.ngrx.io"
+    },
+    {
+      "title": "v15",
+      "url": "https://v15.ngrx.io"
+    },
+    {
+      "title": "v14",
+      "url": "https://v14.ngrx.io"
+    },
+    {
+      "title": "v13",
+      "url": "https://v13.ngrx.io"
+    },
+    {
+      "title": "v12",
+      "url": "https://v12.ngrx.io"
+    },
+    {
+      "title": "v11",
+      "url": "https://v11.ngrx.io"
+    },
+    {
+      "title": "v10",
+      "url": "https://v10.ngrx.io"
+    },
+    {
+      "title": "v9",
+      "url": "https://v9.ngrx.io"
+    },
+    {
+      "title": "v8",
+      "url": "https://v8.ngrx.io"
+    },
+    {
+      "title": "v7",
+      "url": "https://v7.ngrx.io"
+    },
+    {
+      "title": "v6",
+      "url": "https://github.com/ngrx/platform/tree/6.1.2/docs"
+    },
+    {
+      "title": "v5",
+      "url": "https://github.com/ngrx/platform/tree/v5.2.0/docs"
+    },
+    {
+      "title": "v4",
+      "url": "https://github.com/ngrx/platform/tree/v4.1.1/docs"
+    }
+  ]
+}

projects/www/src/app/services/versionInfo.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { of } from 'rxjs';
+import versionInfoData from '../data/versionInfo.json';
+
+export interface NavigationNode {
+  url: string;
+  title: string;
+}
+
+export interface VersionInfo {
+  currentVersion: string;
+  docVersions: NavigationNode[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class VersionInfoService {
+  private readonly versionInfo = versionInfoData as VersionInfo;
+
+  getVersions() {
+    return of(this.versionInfo.docVersions);
+  }
+
+  getCurrentVersion(): string {
+    return this.versionInfo.currentVersion;
+  }
+}