[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

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

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

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>();
 

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 = {
+  protected rlaOptions: IsActiveMatchOptions = {
-    paths: "exact",
+    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.