docs: convert component sidenav guard to a functional guard (#33877)

Replaces the class-based `CanActivateComponentSidenav` guard with a
functional `CanActivateFn`. Instead of triggering a separate navigation
and returning `false`, the guard now returns a `UrlTree` so the router
handles the redirect as part of the current navigation.

Author: MeAkib

docs/src/app/pages/component-sidenav/component-sidenav-can-load-guard.spec.ts

@@ -0,0 +1,33 @@
+import {TestBed} from '@angular/core/testing';
+import {ActivatedRouteSnapshot, provideRouter, Router, UrlSegment, UrlTree} from '@angular/router';
+import {canActivateComponentSidenav} from './component-sidenav-can-load-guard';
+
+describe('canActivateComponentSidenav', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [provideRouter([])],
+    });
+  });
+
+  function runGuard(section: string) {
+    const route = {url: [new UrlSegment(section, {})]} as unknown as ActivatedRouteSnapshot;
+    return TestBed.runInInjectionContext(() => canActivateComponentSidenav(route, {} as any));
+  }
+
+  it('should allow activation for a known section', () => {
+    expect(runGuard('components')).toBe(true);
+    expect(runGuard('cdk')).toBe(true);
+  });
+
+  it('should match the section case-insensitively', () => {
+    expect(runGuard('CDK')).toBe(true);
+  });
+
+  it('should redirect to the root for an unknown section', () => {
+    const result = runGuard('unknown');
+    const router = TestBed.inject(Router);
+
+    expect(result instanceof UrlTree).toBe(true);
+    expect(router.serializeUrl(result as UrlTree)).toBe('/');
+  });
+});

docs/src/app/pages/component-sidenav/component-sidenav-can-load-guard.ts

@@ -6,27 +6,20 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {Service, inject} from '@angular/core';
-import {ActivatedRouteSnapshot, Router} from '@angular/router';
+import {inject} from '@angular/core';
+import {CanActivateFn, Router} from '@angular/router';
 import {SECTIONS} from '../../shared/documentation-items/documentation-items';
 
 /**
  * Guard to determine if the sidenav can load, based on whether the section exists in documentation
  * items.
  */
-@Service()
-export class CanActivateComponentSidenav {
-  private _router = inject(Router);
-
-  canActivate(route: ActivatedRouteSnapshot) {
-    // Searches if the section defined in the base UrlSegment is a valid section from the
-    // documentation items. If found, returns true to allow activation, otherwise blocks activation
-    // and navigates to '/'.
-    if (Object.keys(SECTIONS).some(s => s.toLowerCase() === route.url[0].path.toLowerCase())) {
-      return true;
-    }
-
-    this._router.navigateByUrl('/');
-    return false;
+export const canActivateComponentSidenav: CanActivateFn = route => {
+  // Searches if the section defined in the base UrlSegment is a valid section from the
+  // documentation items. If found, returns true to allow activation, otherwise redirects to '/'.
+  if (Object.keys(SECTIONS).some(s => s.toLowerCase() === route.url[0].path.toLowerCase())) {
+    return true;
   }
-}
+
+  return inject(Router).parseUrl('/');
+};

docs/src/app/routes.ts

@@ -8,7 +8,7 @@
 
 import {Component} from '@angular/core';
 import {Route, Routes} from '@angular/router';
-import {CanActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard';
+import {canActivateComponentSidenav} from './pages/component-sidenav/component-sidenav-can-load-guard';
 
 @Component({template: ''})
 export class RedirectPlaceholder {}
@@ -73,7 +73,7 @@ export const MATERIAL_DOCS_ROUTES: Routes = [
   },
   {
     path: ':section',
-    canActivate: [CanActivateComponentSidenav],
+    canActivate: [canActivateComponentSidenav],
     loadChildren: () =>
       import('./pages/component-sidenav/component-sidenav').then(m => m.componentSidenavRoutes),
   },