mirror of
https://github.com/bitwarden/browser
synced 2026-02-05 11:13:44 +00:00
b8a1856fc6
* Revert "Revert "[CL-622][CL-562][CL-621][CL-632] various drawer improvements …"
This reverts commit 4b32d1f9dd.
* fix virtual scroll: add .cdk-virtual-scrollable to scroll viewport target
* remove references to main el
* use directives instead of querySelector (#14950)
* remove references to main el
* wip
* banish querySelector to the shadow realm
* revert apps/ files
* Add virtual scrolling docs
Co-authored-by: Vicki League <vleague@bitwarden.com>
* add jsdoc
* run eslint
* fix skip links bug
* Update libs/components/src/layout/layout.component.ts
Co-authored-by: Vicki League <vleague@bitwarden.com>
* update tab handler
* only run on tab
* fix lint
* fix virtual scroll issue due to Angular 19 upgrade (#15193)
thanks Vicki
---------
Co-authored-by: Vicki League <vleague@bitwarden.com>
55 lines
1.8 KiB
HTML
55 lines
1.8 KiB
HTML
@let mainContentId = "main-content";
|
|
<div class="tw-flex tw-w-full">
|
|
<div class="tw-flex tw-w-full" cdkTrapFocus>
|
|
<div
|
|
class="tw-fixed tw-z-50 tw-w-full tw-flex tw-justify-center tw-opacity-0 focus-within:tw-opacity-100 tw-pointer-events-none focus-within:tw-pointer-events-auto"
|
|
>
|
|
<nav class="tw-bg-background-alt3 tw-rounded-md tw-rounded-t-none tw-py-2 tw-text-alt2">
|
|
<a
|
|
#skipLink
|
|
bitLink
|
|
class="tw-mx-6 focus-visible:before:!tw-ring-0"
|
|
[fragment]="mainContentId"
|
|
[routerLink]="[]"
|
|
(click)="focusMainContent()"
|
|
linkType="light"
|
|
>{{ "skipToContent" | i18n }}</a
|
|
>
|
|
</nav>
|
|
</div>
|
|
<ng-content select="bit-side-nav, [slot=side-nav]"></ng-content>
|
|
<main
|
|
#main
|
|
[id]="mainContentId"
|
|
tabindex="-1"
|
|
bitScrollLayoutHost
|
|
class="tw-overflow-auto tw-max-h-screen tw-min-w-0 tw-flex-1 tw-bg-background tw-p-6 md:tw-ms-0 tw-ms-16"
|
|
>
|
|
<ng-content></ng-content>
|
|
|
|
<!-- overlay backdrop for side-nav -->
|
|
@if (
|
|
{
|
|
open: sideNavService.open$ | async,
|
|
};
|
|
as data
|
|
) {
|
|
<div
|
|
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']"
|
|
>
|
|
@if (data.open) {
|
|
<div
|
|
(click)="sideNavService.toggle()"
|
|
class="tw-pointer-events-auto tw-size-full"
|
|
></div>
|
|
}
|
|
</div>
|
|
}
|
|
</main>
|
|
</div>
|
|
<div class="tw-absolute tw-z-50 tw-left-0 md:tw-sticky tw-top-0 tw-h-screen md:tw-w-auto">
|
|
<ng-template [cdkPortalOutlet]="drawerPortal()"></ng-template>
|
|
</div>
|
|
</div>
|