wip test

apps/browser/src/platform/popup/layout/popup-tab-navigation.component.html

@@ -1,29 +1,14 @@
-<div class="tw-h-full tw-overflow-y-auto [&>*]:tw-h-full [&>*]:tw-overflow-y-auto">
+<bit-layout>
+  <bit-side-nav slot="side-nav">
+    <bit-nav-logo [openIcon]="logo" route="." [label]="'Bitwarden'"></bit-nav-logo>
+    <bit-nav-item
+      *ngFor="let button of navButtons"
+      [route]="button.page"
+      [icon]="'bwi-' + button.iconKey"
+      [ariaLabel]="button.label"
+      [text]="button.label"
+    >
+    </bit-nav-item>
+  </bit-side-nav>
   <ng-content></ng-content>
-</div>
-<footer class="tw-bg-background tw-border-0 tw-border-t tw-border-secondary-300 tw-border-solid">
-  <div class="tw-max-w-screen-sm tw-mx-auto">
-    <div class="tw-flex tw-flex-1">
-      <a
-        *ngFor="let button of navButtons"
-        class="tw-flex-1 tw-flex tw-flex-col tw-items-center tw-gap-1 tw-px-0.5 tw-pb-2 tw-pt-3 tw-no-underline hover:tw-no-underline hover:tw-text-primary-600 hover:tw-bg-primary-100 tw-border-2 tw-border-solid tw-border-transparent focus-visible:tw-rounded-lg focus-visible:tw-border-primary-600"
-        [ngClass]="rla.isActive ? 'tw-font-bold tw-text-primary-600' : 'tw-text-muted'"
-        [title]="button.label"
-        [routerLink]="button.page"
-        routerLinkActive
-        #rla="routerLinkActive"
-        ariaCurrentWhenActive="page"
-      >
-        <i *ngIf="!rla.isActive" class="bwi bwi-lg bwi-{{ button.iconKey }}" aria-hidden="true"></i>
-        <i
-          *ngIf="rla.isActive"
-          class="bwi bwi-lg bwi-{{ button.iconKeyActive }}"
-          aria-hidden="true"
-        ></i>
-        <span class="tw-truncate tw-max-w-full">
-          {{ button.label }}
-        </span>
-      </a>
-    </div>
-  </div>
-</footer>
+</bit-layout>

apps/browser/src/platform/popup/layout/popup-tab-navigation.component.ts

@@ -2,18 +2,21 @@ import { CommonModule } from "@angular/common";
 import { Component } from "@angular/core";
 import { RouterModule } from "@angular/router";
 
-import { LinkModule } from "@bitwarden/components";
+import { LinkModule, LayoutComponent, NavigationModule } from "@bitwarden/components";
 
+import { PasswordManagerLogo } from "./password-manager-logo";
 @Component({
   selector: "popup-tab-navigation",
   templateUrl: "popup-tab-navigation.component.html",
   standalone: true,
-  imports: [CommonModule, LinkModule, RouterModule],
+  imports: [CommonModule, LinkModule, RouterModule, LayoutComponent, NavigationModule],
   host: {
     class: "tw-block tw-h-full tw-w-full tw-flex tw-flex-col",
   },
 })
 export class PopupTabNavigationComponent {
+  logo = PasswordManagerLogo;
+
   navButtons = [
     {
       label: "Vault",

apps/browser/src/popup/scss/base.scss

@@ -15,7 +15,9 @@ body {
 }
 
 body {
-  width: 380px !important;
+  width: 380px;
+  transition: width 1s ease-out;
+  min-width: 380px !important;
   height: 600px !important;
   position: relative;
   min-height: 100vh;
@@ -444,13 +446,13 @@ app-root {
 @media only screen and (min-width: 601px) {
   header,
   main {
-    padding: 0 calc((100% - 500px) / 2);
+    // padding: 0 calc((100% - 500px) / 2);
   }
 }
 
 main:not(popup-page main) {
   position: absolute;
-  top: 44px;
+  top: 0px;
   bottom: 0;
   left: 0;
   right: 0;

apps/browser/src/vault/popup/settings/appearance-v2.component.html

@@ -37,6 +37,11 @@
         <input bitCheckbox formControlName="compactMode" type="checkbox" />
         <bit-label>{{ "Compact Mode" }}</bit-label>
       </bit-form-control>
+
+      <label>
+        Width {{ appearanceForm.value.width }}px
+        <input type="range" min="380" max="800" formControlName="width" />
+      </label>
     </bit-card>
   </form>
 </popup-page>

apps/browser/src/vault/popup/settings/appearance-v2.component.ts

@@ -46,6 +46,7 @@ export class AppearanceV2Component implements OnInit {
     theme: ThemeType.System,
     enableAnimations: true,
     compactMode: false,
+    width: 380,
   });
 
   /** To avoid flashes of inaccurate values, only show the form after the entire form is populated. */
@@ -86,6 +87,7 @@ export class AppearanceV2Component implements OnInit {
       theme,
       enableAnimations,
       compactMode: false,
+      width: document.body.clientWidth,
     });
 
     this.formLoading = false;
@@ -119,6 +121,12 @@ export class AppearanceV2Component implements OnInit {
       .subscribe((compactMode) => {
         this.designSystemService.compactMode.set(compactMode);
       });
+
+    this.appearanceForm.controls.width.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe((width) => {
+        document.body.style.width = `${width}px`;
+      });
   }
 
   async updateFavicon(enableFavicon: boolean) {