mirror of
https://github.com/bitwarden/browser
synced 2025-12-19 01:33:33 +00:00
c25cd63022
* fix nav indentation * move padding logic to component * add jsdoc for padding calculation * access open value correctly
96 lines
3.8 KiB
HTML
96 lines
3.8 KiB
HTML
<div class="tw-ps-2 tw-pe-2">
|
|
@let open = sideNavService.open$ | async;
|
|
@if (open || icon()) {
|
|
<div
|
|
[ngStyle]="{
|
|
'padding-inline-start': navItemIndentationPadding(),
|
|
}"
|
|
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">
|
|
@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
|
|
[ngClass]="[
|
|
variant() === 'tree' || treeDepth() > 0 ? 'tw-py-0' : 'tw-py-2',
|
|
open ? 'tw-pe-4' : 'tw-text-center',
|
|
]"
|
|
[title]="text()"
|
|
class="tw-gap-2 tw-flex tw-items-center tw-font-medium tw-h-full"
|
|
[ngClass]="{ '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]"
|
|
[ngClass]="{ '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()"
|
|
>
|
|
<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]"
|
|
[ngClass]="open ? 'tw-pe-3' : 'tw-pe-4'"
|
|
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>
|