[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>

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.html

@@ -1,5 +1,5 @@
 <bit-layout variant="secondary">
-  <nav slot="sidebar" *ngIf="provider$ | async as provider">
+  <nav slot="sidebar" *ngIf="provider$ | async as provider" class="tw-flex tw-flex-col tw-h-full">
     <a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'providerPortal' | i18n">
       <bit-icon [icon]="logo"></bit-icon>
     </a>
@@ -40,6 +40,9 @@
       route="settings"
       *ngIf="showSettingsTab(provider)"
     ></bit-nav-item>
+
+    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
+
     <app-toggle-width></app-toggle-width>
   </nav>
   <app-payment-method-warnings

bitwarden_license/bit-web/src/app/admin-console/providers/providers-layout.component.ts

@@ -13,6 +13,7 @@ import { ConfigService } from "@bitwarden/common/platform/abstractions/config/co
 import { IconModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
 import { ProviderPortalLogo } from "@bitwarden/web-vault/app/admin-console/icons/provider-portal-logo";
 import { PaymentMethodWarningsModule } from "@bitwarden/web-vault/app/billing/shared";
+import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
 import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
 
 @Component({
@@ -28,6 +29,7 @@ import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-wi
     NavigationModule,
     PaymentMethodWarningsModule,
     ToggleWidthComponent,
+    ProductSwitcherModule,
   ],
 })
 export class ProvidersLayoutComponent implements OnInit, OnDestroy {

bitwarden_license/bit-web/src/app/secrets-manager/layout/layout.module.ts

@@ -2,6 +2,7 @@ import { NgModule } from "@angular/core";
 
 import { LayoutComponent as BitLayoutComponent, NavigationModule } from "@bitwarden/components";
 import { OrgSwitcherComponent } from "@bitwarden/web-vault/app/layouts/org-switcher/org-switcher.component";
+import { ProductSwitcherModule } from "@bitwarden/web-vault/app/layouts/product-switcher/product-switcher.module";
 import { ToggleWidthComponent } from "@bitwarden/web-vault/app/layouts/toggle-width.component";
 import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module";
 
@@ -15,6 +16,7 @@ import { NavigationComponent } from "./navigation.component";
     BitLayoutComponent,
     OrgSwitcherComponent,
     ToggleWidthComponent,
+    ProductSwitcherModule,
   ],
   declarations: [LayoutComponent, NavigationComponent],
 })

bitwarden_license/bit-web/src/app/secrets-manager/layout/navigation.component.html

@@ -1,4 +1,4 @@
-<nav>
+<nav class="tw-flex tw-flex-col tw-h-full">
   <a routerLink="." class="tw-m-5 tw-mt-7 tw-block">
     <bit-icon [icon]="logo"></bit-icon>
   </a>
@@ -48,5 +48,7 @@
     ></bit-nav-item>
   </bit-nav-group>
 
+  <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
+
   <app-toggle-width></app-toggle-width>
 </nav>