From 018b4d5eb4c93ef25b977f656f042000a5200cd8 Mon Sep 17 00:00:00 2001
From: Mark Youssef <141061617+mark-youssef-bitwarden@users.noreply.github.com>
Date: Mon, 29 Sep 2025 07:19:52 -0700
Subject: [PATCH] [CL-609] Close side nav when breakpoint changes (#15062)

* Close side nav when breakpoint changes

* Leverage side-nave listener instead

* Remove effect inside pipe

* Reuse isSmallScreen
---
 libs/components/src/navigation/side-nav.service.ts | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/navigation/side-nav.service.ts b/libs/components/src/navigation/side-nav.service.ts
index 87691244ca4..5a67f2c965b 100644
--- a/libs/components/src/navigation/side-nav.service.ts
+++ b/libs/components/src/navigation/side-nav.service.ts
@@ -1,4 +1,5 @@
 import { Injectable } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
 import { BehaviorSubject, Observable, combineLatest, fromEvent, map, startWith } from "rxjs";
 
 @Injectable({
@@ -8,10 +9,20 @@ export class SideNavService {
   private _open$ = new BehaviorSubject<boolean>(!window.matchMedia("(max-width: 768px)").matches);
   open$ = this._open$.asObservable();
 
-  isOverlay$ = combineLatest([this.open$, media("(max-width: 768px)")]).pipe(
+  private isSmallScreen$ = media("(max-width: 768px)");
+
+  isOverlay$ = combineLatest([this.open$, this.isSmallScreen$]).pipe(
     map(([open, isSmallScreen]) => open && isSmallScreen),
   );
 
+  constructor() {
+    this.isSmallScreen$.pipe(takeUntilDestroyed()).subscribe((isSmallScreen) => {
+      if (isSmallScreen) {
+        this.setClose();
+      }
+    });
+  }
+
   get open() {
     return this._open$.getValue();
   }