mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 07:43:35 +00:00
Add a dev tool for toggling the web vault width. This allows developers and designers to experiment with how the vault currently behaves with responsiveness and ensure new functionality looks good.
34 lines
919 B
TypeScript
34 lines
919 B
TypeScript
import { CommonModule } from "@angular/common";
|
|
import { Component } from "@angular/core";
|
|
|
|
import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service";
|
|
import { NavigationModule } from "@bitwarden/components";
|
|
|
|
@Component({
|
|
selector: "app-toggle-width",
|
|
template: `<bit-nav-item
|
|
text="Toggle Width"
|
|
icon="bwi-bug"
|
|
*ngIf="isDev"
|
|
class="tw-absolute tw-bottom-0 tw-w-full"
|
|
(click)="toggleWidth()"
|
|
></bit-nav-item>`,
|
|
standalone: true,
|
|
imports: [CommonModule, NavigationModule],
|
|
})
|
|
export class ToggleWidthComponent {
|
|
protected isDev: boolean;
|
|
|
|
constructor(platformUtilsService: PlatformUtilsService) {
|
|
this.isDev = platformUtilsService.isDev();
|
|
}
|
|
|
|
protected toggleWidth() {
|
|
if (document.body.style.minWidth === "unset") {
|
|
document.body.style.minWidth = "";
|
|
} else {
|
|
document.body.style.minWidth = "unset";
|
|
}
|
|
}
|
|
}
|