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

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.html

@@ -1,5 +1,9 @@
 <bit-layout variant="secondary">
-  <nav slot="sidebar" *ngIf="organization$ | async as organization">
+  <nav
+    slot="sidebar"
+    *ngIf="organization$ | async as organization"
+    class="tw-flex tw-flex-col tw-h-full"
+  >
     <a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'adminConsole' | i18n">
       <bit-icon [icon]="logo"></bit-icon>
     </a>
@@ -106,6 +110,8 @@
       ></bit-nav-item>
     </bit-nav-group>
 
+    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
+
     <app-toggle-width></app-toggle-width>
   </nav>
 

apps/web/src/app/admin-console/organizations/layouts/organization-layout.component.ts

@@ -25,6 +25,7 @@ import { BannerModule, IconModule, LayoutComponent, NavigationModule } from "@bi
 
 import { PaymentMethodWarningsModule } from "../../../billing/shared";
 import { OrgSwitcherComponent } from "../../../layouts/org-switcher/org-switcher.component";
+import { ProductSwitcherModule } from "../../../layouts/product-switcher/product-switcher.module";
 import { ToggleWidthComponent } from "../../../layouts/toggle-width.component";
 import { AdminConsoleLogo } from "../../icons/admin-console-logo";
 
@@ -43,6 +44,7 @@ import { AdminConsoleLogo } from "../../icons/admin-console-logo";
     BannerModule,
     PaymentMethodWarningsModule,
     ToggleWidthComponent,
+    ProductSwitcherModule,
   ],
 })
 export class OrganizationLayoutComponent implements OnInit, OnDestroy {