mirror of
https://github.com/bitwarden/browser
synced 2025-12-06 00:13:28 +00:00
78 lines
3.0 KiB
HTML
78 lines
3.0 KiB
HTML
<div class="tw-ps-2 tw-pe-2">
|
|
@let open = sideNavService.open$ | async;
|
|
@if (open || icon()) {
|
|
<div
|
|
class="tw-relative tw-rounded-md tw-h-10"
|
|
[ngClass]="[
|
|
showActiveStyles
|
|
? 'tw-bg-background-alt4'
|
|
: 'tw-bg-background-alt3 hover:tw-bg-hover-contrast',
|
|
fvwStyles$ | async,
|
|
]"
|
|
>
|
|
<div class="tw-relative tw-flex tw-items-center tw-h-full">
|
|
<ng-container *ngIf="route; then isAnchor; else isButton"></ng-container>
|
|
|
|
<!-- Main content of `NavItem` -->
|
|
<ng-template #anchorAndButtonContent>
|
|
<div
|
|
[title]="text()"
|
|
class="tw-gap-2 tw-items-center tw-font-bold tw-h-full tw-content-center"
|
|
[ngClass]="{ 'tw-text-center': !open, 'tw-flex': open }"
|
|
>
|
|
<i
|
|
class="!tw-m-0 tw-w-4 tw-shrink-0 bwi bwi-fw tw-text-alt2 {{ icon() }}"
|
|
[attr.aria-hidden]="open"
|
|
[attr.aria-label]="text()"
|
|
></i>
|
|
@if (open) {
|
|
<span class="tw-truncate">{{ text() }}</span>
|
|
}
|
|
</div>
|
|
</ng-template>
|
|
|
|
<!-- Show if a value was passed to `this.to` -->
|
|
<ng-template #isAnchor>
|
|
<!-- The `data-fvw` attribute passes focus to `this.focusVisibleWithin$` -->
|
|
<!-- The following `class` field should match the `#isButton` class field below -->
|
|
<a
|
|
class="tw-size-full tw-px-3 tw-block tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
|
|
data-fvw
|
|
[routerLink]="route()"
|
|
[relativeTo]="relativeTo()"
|
|
[attr.aria-label]="ariaLabel() || text()"
|
|
routerLinkActive
|
|
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
[ariaCurrentWhenActive]="'page'"
|
|
(isActiveChange)="setIsActive($event)"
|
|
(click)="mainContentClicked.emit()"
|
|
>
|
|
<ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
|
|
</a>
|
|
</ng-template>
|
|
|
|
<!-- Show if `this.to` is falsy -->
|
|
<ng-template #isButton>
|
|
<!-- Class field should match `#isAnchor` class field above -->
|
|
<button
|
|
type="button"
|
|
class="tw-size-full tw-px-3 tw-truncate tw-border-none tw-bg-transparent tw-text-start !tw-text-alt2 hover:tw-text-alt2 hover:tw-no-underline focus:tw-outline-none"
|
|
data-fvw
|
|
(click)="mainContentClicked.emit()"
|
|
>
|
|
<ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
|
|
</button>
|
|
</ng-template>
|
|
|
|
@if (open) {
|
|
<div
|
|
class="tw-flex tw-items-center tw-pe-1.5 tw-gap-1 [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2 empty:tw-hidden"
|
|
>
|
|
<ng-content select="[slot=end]"></ng-content>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|