mirror of
https://github.com/bitwarden/browser
synced 2026-02-25 17:13:24 +00:00
94 lines
3.9 KiB
HTML
94 lines
3.9 KiB
HTML
<div class="tw-ps-2 tw-pe-2">
|
|
@let open = sideNavService.open$ | async;
|
|
@if (open || icon()) {
|
|
<div
|
|
[style.padding-inline-start]="navItemIndentationPadding()"
|
|
class="tw-relative tw-rounded-md tw-h-10"
|
|
[class.tw-bg-background-alt4]="showActiveStyles"
|
|
[class.tw-bg-background-alt3]="!showActiveStyles"
|
|
[class.hover:tw-bg-hover-contrast]="!showActiveStyles"
|
|
[class]="fvwStyles$ | async"
|
|
>
|
|
<div class="tw-relative tw-flex tw-items-center tw-h-full">
|
|
@if (open) {
|
|
<div
|
|
class="tw-absolute tw-left-[0px] tw-transform tw--translate-x-[calc(100%_+_4px)] [&>*:focus-visible::before]:!tw-ring-text-alt2 [&>*:hover]:!tw-border-text-alt2 [&>*]:tw-text-alt2"
|
|
>
|
|
<ng-content select="[slot=start]"></ng-content>
|
|
</div>
|
|
}
|
|
<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-flex tw-items-center tw-font-medium tw-h-full"
|
|
[class.tw-py-0]="variant() === 'tree' || treeDepth() > 0"
|
|
[class.tw-py-2]="variant() !== 'tree' && treeDepth() === 0"
|
|
[class.tw-text-center]="!open"
|
|
[class.tw-justify-center]="!open"
|
|
>
|
|
@if (icon()) {
|
|
<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.route` -->
|
|
<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-4 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 [&_i]:tw-leading-[1.5rem]"
|
|
[class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
|
|
data-fvw
|
|
[routerLink]="route()"
|
|
[relativeTo]="relativeTo()"
|
|
[attr.aria-label]="ariaLabel() || text()"
|
|
routerLinkActive
|
|
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
[ariaCurrentWhenActive]="ariaCurrentWhenActive()"
|
|
(isActiveChange)="setIsActive($event)"
|
|
(click)="mainContentClicked.emit()"
|
|
[state]="{
|
|
focusAfterNav: focusAfterNavTarget(),
|
|
}"
|
|
>
|
|
<ng-container *ngTemplateOutlet="anchorAndButtonContent"></ng-container>
|
|
</a>
|
|
</ng-template>
|
|
|
|
<!-- Show if `this.route` is falsy -->
|
|
<ng-template #isButton>
|
|
<!-- Class field should match `#isAnchor` class field above -->
|
|
<button
|
|
type="button"
|
|
class="tw-size-full tw-px-4 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 [&_i]:tw-leading-[1.5rem]"
|
|
[class.!tw-ps-0]="variant() === 'tree' || treeDepth() > 0"
|
|
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 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>
|