bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-17 16:53:34 +00:00
Code Issues Releases Wiki Activity

[CL-672] update mobile design of dialog (#14828)

Browse Source 
---------

Co-authored-by: Vicki League <vleague@bitwarden.com>
This commit is contained in:
Mark Youssef
2025-11-13 18:59:03 -08:00
committed by GitHub
parent 9a3ba9e05b
commit a55d0f02f2
30 changed files with 255 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
libs/components/src/navigation/side-nav.service.ts
View File

@@ -2,32 +2,30 @@ import { Injectable } from "@angular/core";
import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
import { BehaviorSubject, Observable, combineLatest, fromEvent, map, startWith } from "rxjs";
type CollapsePreference = "open" | "closed" | null;
import { BREAKPOINTS, isAtOrLargerThanBreakpoint } from "../utils/responsive-utils";
const SMALL_SCREEN_BREAKPOINT_PX = 768;
type CollapsePreference = "open" | "closed" | null;
@Injectable({
providedIn: "root",
})
export class SideNavService {
private _open$ = new BehaviorSubject<boolean>(
!window.matchMedia(`(max-width: ${SMALL_SCREEN_BREAKPOINT_PX}px)`).matches,
);
private _open$ = new BehaviorSubject<boolean>(isAtOrLargerThanBreakpoint("md"));
open$ = this._open$.asObservable();
private isSmallScreen$ = media(`(max-width: ${SMALL_SCREEN_BREAKPOINT_PX}px)`);
private isLargeScreen$ = media(`(min-width: ${BREAKPOINTS.md}px)`);
private _userCollapsePreference$ = new BehaviorSubject<CollapsePreference>(null);
userCollapsePreference$ = this._userCollapsePreference$.asObservable();
isOverlay$ = combineLatest([this.open$, this.isSmallScreen$]).pipe(
map(([open, isSmallScreen]) => open && isSmallScreen),
isOverlay$ = combineLatest([this.open$, this.isLargeScreen$]).pipe(
map(([open, isLargeScreen]) => open && !isLargeScreen),
);
constructor() {
combineLatest([this.isSmallScreen$, this.userCollapsePreference$])
combineLatest([this.isLargeScreen$, this.userCollapsePreference$])
.pipe(takeUntilDestroyed())
.subscribe(([isSmallScreen, userCollapsePreference]) => {
if (isSmallScreen) {
.subscribe(([isLargeScreen, userCollapsePreference]) => {
if (!isLargeScreen) {
this.setClose();
} else if (userCollapsePreference !== "closed") {
// Auto-open when user hasn't set preference (null) or prefers open