bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-19 09:43:23 +00:00
Code Issues Releases Wiki Activity

[CL-118][CL-164][PM-8019] collapsible side navigation (#6383)

Browse Source
This commit is contained in:
Will Martin
2024-06-17 14:10:50 -04:00
committed by GitHub
parent 3bfdc50d5d
commit 06410a0633
30 changed files with 624 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
libs/components/src/layout/layout.component.html
View File

@@ -13,24 +13,28 @@
>
</nav>
</div>
<div class="tw-flex tw-w-full">
<aside
[ngStyle]="
variant === 'secondary' && {
'--color-text-alt2': 'var(--color-text-main)',
'--color-background-alt3': 'var(--color-secondary-100)',
'--color-background-alt4': 'var(--color-secondary-300)'
}
"
class="tw-sticky tw-inset-y-0 tw-h-screen tw-w-60 tw-overflow-auto tw-bg-background-alt3"
>
<ng-content select="[slot=sidebar]"></ng-content>
</aside>
<div class="tw-group tw-flex tw-w-full">
<ng-content select="bit-side-nav, [slot=side-nav]"></ng-content>
<main
[id]="mainContentId"
tabindex="-1"
class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6"
class="tw-overflow-auto tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ml-0 tw-ml-16"
>
<ng-content></ng-content>
<!-- overlay backdrop for side-nav -->
<div
*ngIf="{
open: sideNavService.open$ | async
} as data"
class="tw-pointer-events-none tw-fixed tw-inset-0 tw-z-10 tw-bg-black tw-bg-opacity-0 motion-safe:tw-transition-colors md:tw-hidden"
[ngClass]="[data.open ? 'tw-bg-opacity-30 md:tw-bg-opacity-0' : 'tw-bg-opacity-0']"
>
<div
*ngIf="data.open"
(click)="sideNavService.toggle()"
class="tw-pointer-events-auto tw-h-full tw-w-full"
></div>
</div>
</main>
</div>