[PM-8517] Create web specific layout (#9209)

We currently duplicate some logic between our layouts. In an effort to streamline our experience I'm exploring if we can create a web specific layout that handles some of this.

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

@@ -1,5 +1,5 @@
-<bit-layout variant="secondary">
-  <bit-side-nav *ngIf="provider$ | async as provider">
+<app-layout>
+  <app-side-nav variant="secondary" *ngIf="provider$ | async as provider">
     <bit-nav-logo [openIcon]="logo" route="." [label]="'providerPortal' | i18n"></bit-nav-logo>
 
     <bit-nav-item
@@ -39,12 +39,8 @@
       route="settings"
       *ngIf="showSettingsTab(provider)"
     ></bit-nav-item>
+  </app-side-nav>
 
-    <ng-container slot="footer">
-      <navigation-product-switcher></navigation-product-switcher>
-      <app-toggle-width></app-toggle-width>
-    </ng-container>
-  </bit-side-nav>
   <bit-banner
     class="-tw-m-6 tw-flex tw-flex-col tw-pb-6"
     (onClose)="(true)"
@@ -65,8 +61,5 @@
       {{ "contactBitwardenSupport" | i18n }} </a
     >.
   </bit-banner>
-  <app-payment-method-warnings
-    *ngIf="showPaymentMethodWarningBanners$ | async"
-  ></app-payment-method-warnings>
   <router-outlet></router-outlet>
-</bit-layout>
+</app-layout>

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

@@ -10,17 +10,9 @@ import { Provider } from "@bitwarden/common/admin-console/models/domain/provider
 import { hasConsolidatedBilling } from "@bitwarden/common/billing/abstractions/provider-billing.service.abstraction";
 import { FeatureFlag } from "@bitwarden/common/enums/feature-flag.enum";
 import { ConfigService } from "@bitwarden/common/platform/abstractions/config/config.service";
-import {
-  BannerModule,
-  IconModule,
-  LayoutComponent,
-  LinkModule,
-  NavigationModule,
-} from "@bitwarden/components";
+import { BannerModule, IconModule, LinkModule } 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";
+import { WebLayoutModule } from "@bitwarden/web-vault/app/layouts/web-layout.module";
 
 import { ProviderClientVaultPrivacyBannerService } from "./services/provider-client-vault-privacy-banner.service";
 
@@ -32,14 +24,10 @@ import { ProviderClientVaultPrivacyBannerService } from "./services/provider-cli
     CommonModule,
     RouterModule,
     JslibModule,
-    LayoutComponent,
+    WebLayoutModule,
     IconModule,
-    NavigationModule,
-    PaymentMethodWarningsModule,
-    ToggleWidthComponent,
-    ProductSwitcherModule,
-    BannerModule,
     LinkModule,
+    BannerModule,
   ],
 })
 export class ProvidersLayoutComponent implements OnInit, OnDestroy {
@@ -51,10 +39,6 @@ export class ProvidersLayoutComponent implements OnInit, OnDestroy {
   protected hasConsolidatedBilling$: Observable<boolean>;
   protected canAccessBilling$: Observable<boolean>;
 
-  protected showPaymentMethodWarningBanners$ = this.configService.getFeatureFlag$(
-    FeatureFlag.ShowPaymentMethodWarningBanners,
-  );
-
   protected showProviderClientVaultPrivacyWarningBanner$ = this.configService.getFeatureFlag$(
     FeatureFlag.ProviderClientVaultPrivacyBanner,
   );

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

@@ -1,4 +1,4 @@
-<bit-layout>
+<app-layout>
   <router-outlet name="sidebar" slot="side-nav"></router-outlet>
   <router-outlet></router-outlet>
-</bit-layout>
+</app-layout>

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

@@ -1,23 +1,14 @@
 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 { WebLayoutModule } from "@bitwarden/web-vault/app/layouts/web-layout.module";
 import { SharedModule } from "@bitwarden/web-vault/app/shared/shared.module";
 
 import { LayoutComponent } from "./layout.component";
 import { NavigationComponent } from "./navigation.component";
 
 @NgModule({
-  imports: [
-    SharedModule,
-    NavigationModule,
-    BitLayoutComponent,
-    OrgSwitcherComponent,
-    ToggleWidthComponent,
-    ProductSwitcherModule,
-  ],
+  imports: [SharedModule, WebLayoutModule, OrgSwitcherComponent],
   declarations: [LayoutComponent, NavigationComponent],
 })
 export class LayoutModule {}

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

@@ -1,4 +1,4 @@
-<bit-side-nav>
+<app-side-nav>
   <bit-nav-logo [openIcon]="logo" route="." [label]="'secretsManager' | i18n"></bit-nav-logo>
   <org-switcher [filter]="orgFilter" [hideNewButton]="true"></org-switcher>
   <bit-nav-item
@@ -50,9 +50,4 @@
       [relativeTo]="route.parent"
     ></bit-nav-item>
   </bit-nav-group>
-
-  <ng-container slot="footer">
-    <navigation-product-switcher></navigation-product-switcher>
-    <app-toggle-width></app-toggle-width>
-  </ng-container>
-</bit-side-nav>
+</app-side-nav>