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

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

@@ -1,5 +1,5 @@
-<bit-layout>
-  <bit-side-nav>
+<app-layout>
+  <app-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>
@@ -30,15 +30,7 @@
         *ngIf="hasFamilySponsorshipAvailable$ | async"
       ></bit-nav-item>
     </bit-nav-group>
+  </app-side-nav>
 
-    <ng-container slot="footer">
-      <navigation-product-switcher></navigation-product-switcher>
-      <app-toggle-width></app-toggle-width>
-    </ng-container>
-  </bit-side-nav>
-
-  <app-payment-method-warnings
-    *ngIf="showPaymentMethodWarningBanners$ | async"
-  ></app-payment-method-warnings>
   <router-outlet></router-outlet>
-</bit-layout>
+</app-layout>