bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-11 22:03:36 +00:00
Code Issues Releases Wiki Activity

[CL-871] responsive sidebar product switcher (#17780)

Browse Source 
* only make switcher sticky when height is larger than 850

* use rem based value for media query

* add comment about why 53rem was chosen
This commit is contained in:
Bryan Cunningham
2025-12-04 11:50:19 -05:00
committed by GitHub
parent 4155e26c28
commit ad12704c21
1 changed files with 5 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
libs/components/src/navigation/side-nav.component.html
View File

@@ -23,7 +23,11 @@
(keydown)="handleKeyDown($event)" (keydown)="handleKeyDown($event)"
> >
<ng-content></ng-content> <ng-content></ng-content>
<div class="tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3"> <!-- 53rem = ~850px -->
<!-- This is a magic number. This number was selected by going to the UI and finding the number that felt the best to me and design. No real rhyme or reason :) -->
<div
class="[@media(min-height:53rem)]:tw-sticky tw-bottom-0 tw-left-0 tw-z-20 tw-mt-auto tw-w-full tw-bg-background-alt3"
>
<bit-nav-divider></bit-nav-divider> <bit-nav-divider></bit-nav-divider>
@if (data.open) { @if (data.open) {
<ng-content select="[slot=footer]"></ng-content> <ng-content select="[slot=footer]"></ng-content>