docs(www): add version picker to side menu

[DuskoPeric]

PR Checklist

Please check if your PR fulfills the following requirements:

• [ x] The commit message follows our guidelines: https://github.com/ngrx/platform/blob/main/CONTRIBUTING.md#commit
• Tests for the changes have been added (for bug fixes / features)
• Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ x] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

The new website doesn't have version picker.

Closes #4975

What is the new behavior?

The new website has version picker.

Does this PR introduce a breaking change?

[ ] Yes
[x ] No

[netlify]

✅ Deploy Preview for ngrx-io canceled.

Name	Link
🔨 Latest commit	553f5f4
🔍 Latest deploy log	https://app.netlify.com/projects/ngrx-io/deploys/69345317a2cec00008cc90c5

[netlify]

✅ Deploy Preview for ngrx-site-v19 ready!

Name	Link
🔨 Latest commit	553f5f4
🔍 Latest deploy log	https://app.netlify.com/projects/ngrx-site-v19/deploys/69345317e122870007127885
😎 Deploy Preview	https://deploy-preview-5040--ngrx-site-v19.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[timdeschryver]

Thanks @DuskoPeric !

[markostanimirovic]

1. From Angular docs:

Prefer using the host property over the decorators.
Always prefer using the host property over @HostBinding and @HostListener. These decorators exist exclusively for backwards compatibility.

2. Class members are public by default. No need to use public modifier explicitly. For private fields, we can use the # prefix instead of the private modifier just to make it shorter.

3. Since we're loading version info eagerly, there is no need for signals (or observables that require conversion to signals).

Suggested change

	],
	})
	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);
	}
	}
	],
	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);
	}
	}

Suggested VersionInfoService implementation is in the next comment.

[markostanimirovic]

We can even take data from versionInfo.json directly in the VersionNavigationComponent. If you want to keep it in a service, here is the suggested implementation:

Suggested change

	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;
	}
	}
	import { Injectable } from '@angular/core';
	import versionInfoData from '../data/versionInfo.json';
	interface PreviousVersion {
	url: string;
	title: string;
	}
	interface VersionInfo {
	currentVersion: string;
	previousVersions: PreviousVersion[];
	}
	@Injectable({ providedIn: 'root' })
	export class VersionInfoService {
	readonly #versionInfo = versionInfoData as VersionInfo;
	readonly currentVersion = this.#versionInfo.currentVersion;
	readonly previousVersions = this.#versionInfo.previousVersions;
	}