[CL-118][CL-164][PM-8019] collapsible side navigation (#6383)

apps/browser/src/_locales/en/messages.json

@@ -2876,6 +2876,9 @@
     "message": "Turn off master password re-prompt to edit this field",
     "description": "Message appearing below the autofill on load message when master password reprompt is set for a vault item."
   },
+  "toggleSideNavigation": {
+    "message": "Toggle side navigation"
+  },
   "skipToContent": {
     "message": "Skip to content"
   },

apps/desktop/src/locales/en/messages.json

@@ -2692,6 +2692,9 @@
   "submenu": {
     "message": "Submenu"
   },
+  "toggleSideNavigation": {
+    "message": "Toggle side navigation"
+  },
   "skipToContent": {
     "message": "Skip to content"
   },

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

@@ -1,12 +1,6 @@
-<bit-layout variant="secondary">
-  <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>
+<bit-layout>
+  <bit-side-nav variant="secondary" *ngIf="organization$ | async as organization">
+    <bit-nav-logo [openIcon]="logo" route="." [label]="'adminConsole' | i18n"></bit-nav-logo>
     <org-switcher [filter]="orgFilter" [hideNewButton]="hideNewOrgButton$ | async"></org-switcher>
 
     <bit-nav-item
@@ -110,10 +104,11 @@
       ></bit-nav-item>
     </bit-nav-group>
 
-    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
-
-    <app-toggle-width></app-toggle-width>
-  </nav>
+    <ng-container slot="footer">
+      <navigation-product-switcher></navigation-product-switcher>
+      <app-toggle-width></app-toggle-width>
+    </ng-container>
+  </bit-side-nav>
 
   <ng-container *ngIf="organization$ | async as organization">
     <bit-banner

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.html

@@ -12,7 +12,7 @@
   <ng-container *ngIf="moreProducts$ | async as moreProducts">
     <section
       *ngIf="moreProducts.length > 0"
-      class="tw-mt-2 tw-flex tw-w-full tw-flex-col tw-gap-2 tw-border-0 tw-border-t tw-border-solid tw-border-t-text-alt2"
+      class="tw-mt-2 tw-flex tw-w-full tw-flex-col tw-gap-2 tw-border-0"
     >
       <span class="tw-text-xs !tw-text-alt2 tw-p-2 tw-pb-0">{{ "moreFromBitwarden" | i18n }}</span>
       <a

apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.component.spec.ts

@@ -13,6 +13,20 @@ import { ProductSwitcherItem, ProductSwitcherService } from "../shared/product-s
 
 import { NavigationProductSwitcherComponent } from "./navigation-switcher.component";
 
+Object.defineProperty(window, "matchMedia", {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // deprecated
+    removeListener: jest.fn(), // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 describe("NavigationProductSwitcherComponent", () => {
   let fixture: ComponentFixture<NavigationProductSwitcherComponent>;
   let productSwitcherService: MockProxy<ProductSwitcherService>;

apps/web/src/app/layouts/user-layout.component.html

@@ -1,8 +1,6 @@
 <bit-layout>
-  <nav slot="sidebar" class="tw-flex tw-flex-col tw-h-full">
-    <a routerLink="." class="tw-m-5 tw-mt-7 tw-block" [appA11yTitle]="'passwordManager' | i18n">
-      <bit-icon [icon]="logo"></bit-icon>
-    </a>
+  <bit-side-nav>
+    <bit-nav-logo [openIcon]="logo" route="." [label]="'passwordManager' | i18n"></bit-nav-logo>
 
     <bit-nav-item icon="bwi-collection" [text]="'vaults' | i18n" route="vault"></bit-nav-item>
     <bit-nav-item icon="bwi-send" [text]="'send' | i18n" route="sends"></bit-nav-item>
@@ -33,10 +31,12 @@
       ></bit-nav-item>
     </bit-nav-group>
 
-    <navigation-product-switcher class="tw-mt-auto"></navigation-product-switcher>
+    <ng-container slot="footer">
+      <navigation-product-switcher></navigation-product-switcher>
+      <app-toggle-width></app-toggle-width>
+    </ng-container>
+  </bit-side-nav>
 
-    <app-toggle-width></app-toggle-width>
-  </nav>
   <app-payment-method-warnings
     *ngIf="showPaymentMethodWarningBanners$ | async"
   ></app-payment-method-warnings>

apps/web/src/locales/en/messages.json

@@ -7655,6 +7655,9 @@
   "alreadyHaveAccount": {
     "message": "Already have an account?"
   },
+  "toggleSideNavigation": {
+    "message": "Toggle side navigation"
+  },
   "skipToContent": {
     "message": "Skip to content"
   },