From 72283d0a3564d3a41f140c41824086fb159397d2 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Tue, 21 Feb 2023 19:04:35 +0100
Subject: [PATCH] [SM-525] Fix projects not being active when on subroute
 (#4815)

* Move overview to separate route. Change nav-item to use subset instead of exact

* Add support for setting exactMatch in nav-item and nav-group

* Change default to subset
---
 .../layout/org-switcher.component.html              |  1 +
 .../src/navigation/nav-group.component.html         |  1 +
 .../src/navigation/nav-group.component.ts           |  6 ++++++
 .../components/src/navigation/nav-item.component.ts | 13 ++++++++++---
 4 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html b/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html
index c08c2b17a2..e639c5f126 100644
--- a/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html
+++ b/bitwarden_license/bit-web/src/app/secrets-manager/layout/org-switcher.component.html
@@ -5,6 +5,7 @@
   icon="bwi-business"
   [route]="['../', activeOrganization.id]"
   [(open)]="open"
+  [exactMatch]="true"
 >
   <ng-container *ngIf="organizations$ | async as organizations">
     <bit-nav-item
diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html
index bb39319790..00382d8636 100644
--- a/libs/components/src/navigation/nav-group.component.html
+++ b/libs/components/src/navigation/nav-group.component.html
@@ -8,6 +8,7 @@
   [treeDepth]="treeDepth"
   (mainContentClicked)="mainContentClicked.emit()"
   [ariaLabel]="ariaLabel"
+  [exactMatch]="exactMatch"
 >
   <ng-template #button>
     <button
diff --git a/libs/components/src/navigation/nav-group.component.ts b/libs/components/src/navigation/nav-group.component.ts
index 9cd83fa6ac..7d13876ff6 100644
--- a/libs/components/src/navigation/nav-group.component.ts
+++ b/libs/components/src/navigation/nav-group.component.ts
@@ -36,6 +36,12 @@ export class NavGroupComponent extends NavBaseComponent implements AfterContentI
    */
   @Input()
   open = false;
+
+  /**
+   * if `true`, use `exact` match for path instead of `subset`.
+   */
+  @Input() exactMatch: boolean;
+
   @Output()
   openChange = new EventEmitter<boolean>();
 
diff --git a/libs/components/src/navigation/nav-item.component.ts b/libs/components/src/navigation/nav-item.component.ts
index 634aa7e763..0f2432b41a 100644
--- a/libs/components/src/navigation/nav-item.component.ts
+++ b/libs/components/src/navigation/nav-item.component.ts
@@ -1,4 +1,4 @@
-import { Component, HostListener } from "@angular/core";
+import { Component, HostListener, Input } from "@angular/core";
 import { IsActiveMatchOptions } from "@angular/router";
 import { BehaviorSubject, map } from "rxjs";
 
@@ -19,13 +19,20 @@ export class NavItemComponent extends NavBaseComponent {
   protected get showActiveStyles() {
     return this._active && !this.hideActiveStyles;
   }
-  protected readonly rlaOptions: IsActiveMatchOptions = {
-    paths: "exact",
+  protected rlaOptions: IsActiveMatchOptions = {
+    paths: "subset",
     queryParams: "exact",
     fragment: "ignored",
     matrixParams: "ignored",
   };
 
+  /**
+   * if `true`, use `exact` match for path instead of `subset`.
+   */
+  @Input() set exactMatch(val: boolean) {
+    this.rlaOptions.paths = val ? "exact" : "subset";
+  }
+
   /**
    * The design spec calls for the an outline to wrap the entire element when the template's anchor/button has :focus-visible.
    * Usually, we would use :focus-within for this. However, that matches when a child element has :focus instead of :focus-visible.