docs(docs-infra): refactor navigation code based on angular style guide (angular#64177)

PR Close angular#64177

Author: utshow-rehman

adev/src/app/core/layout/navigation/navigation.component.html

@@ -62,9 +62,9 @@
   <nav
     class="adev-nav-primary docs-scroll-hide"
     [class.adev-nav-primary--open]="isMobileNavigationOpened()"
-    [class.adev-nav-primary--rc]="currentDocsVersionMode === 'rc'"
-    [class.adev-nav-primary--next]="currentDocsVersionMode === 'next'"
-    [class.adev-nav-primary--deprecated]="currentDocsVersionMode === 'deprecated'"
+    [class.adev-nav-primary--rc]="currentDocsVersionMode() === 'rc'"
+    [class.adev-nav-primary--next]="currentDocsVersionMode() === 'next'"
+    [class.adev-nav-primary--deprecated]="currentDocsVersionMode() === 'deprecated'"
   >
     <button
       type="button"

adev/src/app/core/layout/navigation/navigation.component.spec.ts

@@ -30,6 +30,7 @@ describe('Navigation', () => {
 
   const fakeVersionManager = {
     currentDocsVersion: signal('v17'),
+    currentDocsVersionMode: signal('stable'),
     versions: signal<Version[]>([]),
   };
 

adev/src/app/core/layout/navigation/navigation.component.ts

@@ -78,12 +78,12 @@ export class Navigation {
   readonly APPLE_SEARCH_LABEL = `⌘`;
   readonly DEFAULT_SEARCH_LABEL = `ctrl`;
 
-  activeRouteItem = this.navigationState.primaryActiveRouteItem;
-  protected theme = this.themeManager.theme;
-  protected openedMenu = signal<MenuType | null>(null);
+  readonly activeRouteItem = this.navigationState.primaryActiveRouteItem;
+  protected readonly theme = this.themeManager.theme;
+  protected readonly openedMenu = signal<MenuType | null>(null);
 
-  protected currentDocsVersion = this.versionManager.currentDocsVersion;
-  protected currentDocsVersionMode = this.versionManager.currentDocsVersionMode;
+  protected readonly currentDocsVersion = this.versionManager.currentDocsVersion;
+  protected readonly currentDocsVersionMode = this.versionManager.currentDocsVersionMode;
 
   // Set the values of the search label and title only on the client, because the label is user-agent specific.
   protected searchLabel = this.isBrowser

adev/src/app/core/services/version-manager.service.ts

@@ -36,14 +36,14 @@ type VersionJson = {version: string; url: string};
 export class VersionManager {
   private document = inject(DOCUMENT);
 
-  get currentDocsVersionMode(): VersionMode {
+  readonly currentDocsVersionMode = computed<VersionMode>(() => {
     const hostname = this.document.location.hostname;
     if (hostname.startsWith('v')) return 'deprecated';
     if (hostname.startsWith('rc')) return 'rc';
     if (hostname.startsWith('next')) return 'next';
 
     return 'stable';
-  }
+  });
 
   private localVersions = (versionJson as VersionJson[]).map((v) => {
     return {