mirror of
https://github.com/bitwarden/clients.git
synced 2026-07-07 21:10:55 +08:00
c5e73b4b8c
* update responsive behavior of three panel layout; give sidenav extra top padding on electron; add stories that show mix of drawer and sidenav states --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
73 lines
2.9 KiB
HTML
73 lines
2.9 KiB
HTML
@let open = sideNavService.open();
|
|
@let isOverlay = sideNavService.isOverlay();
|
|
|
|
<div class="tw-relative tw-h-full">
|
|
<nav
|
|
id="bit-side-nav"
|
|
class="tw-sticky tw-inset-y-0 tw-left-0 tw-z-30 tw-flex tw-h-full tw-flex-col tw-overflow-hidden tw-bg-bg-sidenav tw-text-fg-sidenav-text tw-outline-none"
|
|
[style.width.rem]="open ? (sideNavService.width$ | async) : undefined"
|
|
[style]="
|
|
variant() === 'secondary'
|
|
? '--color-sidenav-text: var(--color-admin-sidenav-text); --color-sidenav-background: var(--color-admin-sidenav-background); --color-sidenav-active-item: var(--color-admin-sidenav-active-item); --color-sidenav-item-hover: var(--color-admin-sidenav-item-hover);'
|
|
: ''
|
|
"
|
|
[cdkTrapFocus]="isOverlay"
|
|
[attr.role]="isOverlay ? 'dialog' : null"
|
|
[attr.aria-modal]="isOverlay ? 'true' : null"
|
|
(keydown)="handleKeyDown($event)"
|
|
>
|
|
<div
|
|
class="tw-flex-1 tw-min-h-0 tw-overflow-auto tw-overscroll-none"
|
|
style="container-type: size"
|
|
>
|
|
<div class="tw-flex tw-flex-col tw-min-h-full">
|
|
<div class="tw-flex-1">
|
|
<ng-content></ng-content>
|
|
</div>
|
|
@if (open) {
|
|
<div
|
|
class="tw-w-full tw-bg-bg-sidenav [@container_(min-height:600px)]:tw-sticky [@container_(min-height:600px)]:tw-bottom-0"
|
|
>
|
|
<ng-content select="[slot=product-switcher]"></ng-content>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
<div class="tw-w-full tw-bg-bg-sidenav">
|
|
<bit-nav-divider></bit-nav-divider>
|
|
@if (open) {
|
|
<ng-content select="[slot=footer]"></ng-content>
|
|
}
|
|
<div class="tw-mx-0.5 tw-my-4 tw-w-[3.75rem]">
|
|
<button
|
|
#toggleButton
|
|
type="button"
|
|
class="tw-mx-auto tw-block tw-max-w-fit"
|
|
[bitIconButton]="open ? 'bwi-angle-left' : 'bwi-angle-right'"
|
|
buttonType="nav-contrast"
|
|
size="small"
|
|
(click)="sideNavService.toggle()"
|
|
[label]="'toggleSideNavigation' | i18n"
|
|
[attr.aria-expanded]="open"
|
|
aria-controls="bit-side-nav"
|
|
></button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<div
|
|
cdkDrag
|
|
(cdkDragMoved)="onDragMoved($event)"
|
|
class="tw-absolute tw-top-0 -tw-right-0.5 tw-z-30 tw-h-full tw-w-1 tw-cursor-col-resize tw-transition-colors tw-duration-[250ms] hover:tw-ease-in-out hover:tw-delay-[250ms] hover:tw-bg-primary-300 focus:tw-outline-none focus-visible:tw-bg-primary-300 before:tw-content-[''] before:tw-absolute before:tw-block before:tw-inset-y-0 before:-tw-left-0.5 before:-tw-right-1"
|
|
[class.tw-hidden]="!open"
|
|
tabindex="0"
|
|
(keydown)="onKeydown($event)"
|
|
role="separator"
|
|
[attr.aria-valuenow]="sideNavService.width$ | async"
|
|
[attr.aria-valuemax]="sideNavService.MAX_OPEN_WIDTH"
|
|
[attr.aria-valuemin]="sideNavService.MIN_OPEN_WIDTH"
|
|
aria-orientation="vertical"
|
|
aria-controls="bit-side-nav"
|
|
[attr.aria-label]="'resizeSideNavigation' | i18n"
|
|
></div>
|
|
</div>
|