[PM-7231] Product Switcher within navigation sidebar (#8810)

* refactor: move logic for products into a service

- This is in preparation for having having the navigation menu show products based off of the same logic.

* add extra small font size to tailwind config

* remove absolute positioning from toggle width component
- it now sits beneath the product switcher

* update product switcher to have UI details that are only shown in the navigation pane

* add navigation oriented product switcher

* integrate navigation product switcher into secrets manager

* integrate navigation product switcher into provider console

* integrate navigation product switcher into user layout

* integrate navigation product switcher into organizations

* add translation for "switch"

* hide active styles from navigation product switcher

* update storybook for product switcher stories

* remove unneeded full width style

* use protected readonly variable instead of getter

* migrate stories to CSF3

* remove double subscription to `moreProducts$`

* only use wrapping div in navigation switcher story

- less vertical space is taken up

* update to satisfies

* refactor `navigationUI` to `otherProductOverrides`

* move observables to protected readonly

* apply margin-top via class on the host component

* remove switch text from the navigation product switcher

* Allow for the active navigation switcher to be shown

* remove xxs font style

* remove unneeded module

* remove switch from stories

* remove defensive nullish coalescing

* remove merge leftovers

* Defect PM-7899 - show organizations product at the top of the other products list

* Defect PM-7951 use attr.icon to keep the icon as an attribute after prod mode is enabled

* Defect PM-7948 update path based on the current org

* force active styles for navigation items (#9128)

* add horizontal margin to icon

---------

Co-authored-by: Thomas Rittson <31796059+eliykat@users.noreply.github.com>

libs/components/src/navigation/nav-item.component.ts

@@ -1,4 +1,4 @@
-import { Component, HostListener, Optional } from "@angular/core";
+import { Component, HostListener, Input, Optional } from "@angular/core";
 import { BehaviorSubject, map } from "rxjs";
 
 import { NavBaseComponent } from "./nav-base.component";
@@ -10,6 +10,9 @@ import { NavGroupComponent } from "./nav-group.component";
   providers: [{ provide: NavBaseComponent, useExisting: NavItemComponent }],
 })
 export class NavItemComponent extends NavBaseComponent {
+  /** Forces active styles to be shown, regardless of the `routerLinkActiveOptions` */
+  @Input() forceActiveStyles? = false;
+
   /**
    * Is `true` if `to` matches the current route
    */
@@ -21,7 +24,7 @@ export class NavItemComponent extends NavBaseComponent {
     }
   }
   protected get showActiveStyles() {
-    return this._isActive && !this.hideActiveStyles;
+    return this.forceActiveStyles || (this._isActive && !this.hideActiveStyles);
   }
 
   /**

libs/components/src/navigation/nav-item.stories.ts

@@ -101,3 +101,14 @@ export const MultipleItemsWithDivider: Story = {
     `,
   }),
 };
+
+export const ForceActiveStyles: Story = {
+  render: (args: NavItemComponent) => ({
+    props: args,
+    template: `
+      <bit-nav-item text="First Nav" icon="bwi-collection"></bit-nav-item>
+      <bit-nav-item text="Active Nav" icon="bwi-collection" [forceActiveStyles]="true"></bit-nav-item>
+      <bit-nav-item text="Third Nav" icon="bwi-collection"></bit-nav-item>
+    `,
+  }),
+};