mirror of
https://github.com/bitwarden/browser
synced 2026-02-18 02:19:18 +00:00
60 lines
1.8 KiB
HTML
60 lines
1.8 KiB
HTML
<!-- This a higher order component that composes `NavItemComponent` -->
|
|
@let variantValue = variant();
|
|
|
|
@if (!hideIfEmpty() || nestedNavComponents().length > 0) {
|
|
<bit-nav-item
|
|
[text]="text()"
|
|
[icon]="icon()"
|
|
[route]="route()"
|
|
[variant]="variantValue"
|
|
[treeDepth]="treeDepth()"
|
|
[relativeTo]="relativeTo()"
|
|
[routerLinkActiveOptions]="routerLinkActiveOptions()"
|
|
(mainContentClicked)="handleMainContentClicked()"
|
|
[ariaLabel]="ariaLabel()"
|
|
[hideActiveStyles]="parentHideActiveStyles()"
|
|
[ariaCurrentWhenActive]="ariaCurrent()"
|
|
[forceActiveStyles]="forceActiveStyles()"
|
|
>
|
|
<ng-template #button>
|
|
<button
|
|
type="button"
|
|
class="tw-ms-auto"
|
|
[ngClass]="{
|
|
'tw-transform tw-rotate-[90deg]': variantValue === 'tree' && !open(),
|
|
}"
|
|
[bitIconButton]="toggleButtonIcon()"
|
|
buttonType="nav-contrast"
|
|
(click)="toggle($event)"
|
|
size="small"
|
|
[attr.aria-expanded]="open().toString()"
|
|
[attr.aria-controls]="contentId"
|
|
[label]="['toggleCollapse' | i18n, text()].join(' ')"
|
|
></button>
|
|
</ng-template>
|
|
@if (variantValue === "tree") {
|
|
<ng-container slot="start">
|
|
<ng-container *ngTemplateOutlet="button"></ng-container>
|
|
</ng-container>
|
|
}
|
|
<ng-container slot="end">
|
|
<ng-content select="[slot=end]"></ng-content>
|
|
@if (variantValue !== "tree") {
|
|
<ng-container *ngTemplateOutlet="button"></ng-container>
|
|
}
|
|
</ng-container>
|
|
</bit-nav-item>
|
|
<!-- [attr.aria-controls] of the above button expects a unique ID on the controlled element -->
|
|
@if (sideNavOpen()) {
|
|
@if (open()) {
|
|
<div
|
|
[attr.id]="contentId"
|
|
[attr.aria-label]="[text(), 'submenu' | i18n].join(' ')"
|
|
role="group"
|
|
>
|
|
<ng-content></ng-content>
|
|
</div>
|
|
}
|
|
}
|
|
}
|