docs(www): 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,118 @@
+import { Component, inject, signal, ElementRef } from '@angular/core';
+import { VersionInfoService } from '../services/versionInfo.service';
+
+@Component({
+  selector: 'ngrx-version-navigation',
+  template: `
+    @if (previousVersions && previousVersions.length > 0) {
+    <div class="version-navigation">
+      <button
+        (click)="toggleDropdown()"
+        class="version-toggle-btn"
+        type="button"
+      >
+        <span>v{{ currentVersion }}</span>
+        <span class="arrow-icon" [class.rotated]="isDropdownVisible()">▼</span>
+      </button>
+
+      <div class="version-list" [class.hidden]="!isDropdownVisible()">
+        <ul>
+          @for (version of previousVersions; 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;
+      }
+    `,
+  ],
+  host: {
+    '(document:click)': 'closeDropdownOnOutsideClick($event)',
+  },
+})
+export class VersionNavigationComponent {
+  readonly #versionInfoService = inject(VersionInfoService);
+  readonly #elementRef = inject(ElementRef);
+  readonly isDropdownVisible = signal(false);
+  readonly currentVersion = this.#versionInfoService.currentVersion;
+  readonly previousVersions = this.#versionInfoService.previousVersions;
+
+  closeDropdownOnOutsideClick(event: Event): void {
+    if (!this.#elementRef.nativeElement.contains(event.target as Node)) {
+      this.isDropdownVisible.set(false);
+    }
+  }
+
+  toggleDropdown(): void {
+    this.isDropdownVisible.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,19 @@
+import { Injectable } from '@angular/core';
+import versionInfoData from '../data/versionInfo.json';
+
+interface PreviousVersion {
+  url: string;
+  title: string;
+}
+
+interface VersionInfo {
+  currentVersion: string;
+  docVersions: PreviousVersion[];
+}
+
+@Injectable({ providedIn: 'root' })
+export class VersionInfoService {
+  readonly #versionInfo = versionInfoData as VersionInfo;
+  readonly currentVersion = this.#versionInfo.currentVersion;
+  readonly previousVersions = this.#versionInfo.docVersions;
+}