docs(sidenav): update responsive example to use current APIs

[EduardF1]

Summary

Updates the responsive sidenav documentation example to use the current CDK APIs instead of manually managing MediaMatcher/MediaQueryList event listeners.

Root Cause

The example was using MediaMatcher with addEventListener/removeEventListener, which requires manual lifecycle management via OnDestroy. An Angular team member noted the preferred approach is to use the CDK's BreakpointObserver.observe() directly.

Changes

• Replaced MediaMatcher with BreakpointObserver.observe()
• Used takeUntilDestroyed() for automatic subscription cleanup
• Removed OnDestroy implementation and manual event listener management
• Removed private _mobileQuery and _mobileQueryListener fields

Result

The component is now simpler, idiomatic Angular, and no longer uses the raw MediaQueryList API.

Fixes #29266

[google-cla]

Thanks for your pull request! It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

View this failed invocation of the CLA check for more information.

For the most up to date status, view the checks section at the bottom of the pull request.

[EduardF1]

Update: I have already signed the Google CLA with fischerszavarduard@gmail.com, and I have now rewritten this PR commit so the author/committer email matches that signed address. The cla/google check is still failing. Could a maintainer please re-run or investigate?

[EduardF1]

Just following up on this PR. The checks look good (apart from the CLA which I believe needs separate handling). Let me know if I need to make any changes!

[EduardF1]

Hi! Just checking in on this PR. The CI is green. Is there anything else needed from my side to help get this reviewed and merged?

[EduardF1]

@googlebot I signed it!

[michael-small]

Good catch to use the breakpoint observer. A lot cleaner.

IMO I would take this one step further: pull this up into making isMobile a toSignal of this breakpoint stream.

I made sure this worked before I suggested it, so if you are interested:

  protected readonly isMobile = toSignal(
    inject(BreakpointObserver)
      .observe('(max-width: 600px)')
      .pipe(map((result) => result.matches)),
    { requireSync: true }
  );

One other thing, unrelated to your changes themself, but this example file could use: tracking errors are thrown in the console due to the current tracking of the items in the string arrays can have duplicates. With no unique property to drill into, I think tracking by $index would be optimal.

[EduardF1]

Thanks for the review, and for checking that the toSignal version works. I agree it is cleaner: it drops the manual subscription entirely and reads better in the template. I have pushed that change (isMobile as a toSignal of the BreakpointObserver stream with requireSync: true).

On the tracking of the string arrays: good catch, the duplicate values do produce tracking warnings. Since it is unrelated to this change I have left it out to keep the diff focused, but it is a one-line switch to $index in the same file, so if a maintainer would rather see it folded into this PR I am happy to add it.