mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.6 KiB
59 lines
1.6 KiB
<mat-tab-nav-panel #tabPanel class="flex-grow-1 overflow-auto">
|
|
<router-outlet />
|
|
</mat-tab-nav-panel>
|
|
|
|
<nav
|
|
mat-align-tabs="center"
|
|
mat-tab-nav-bar
|
|
[disablePagination]="true"
|
|
[tabPanel]="tabPanel"
|
|
>
|
|
@for (tab of tabs(); track tab) {
|
|
@if (tab.showCondition !== false) {
|
|
@if (tab.onClick) {
|
|
<button
|
|
class="no-min-width overflow-hidden px-2"
|
|
mat-tab-link
|
|
type="button"
|
|
(click)="tab.onClick()"
|
|
>
|
|
<ng-container
|
|
*ngTemplateOutlet="tabContent; context: { $implicit: tab }"
|
|
/>
|
|
<ion-icon
|
|
class="d-none d-sm-block external-link-icon ms-auto text-muted"
|
|
name="open-outline"
|
|
/>
|
|
</button>
|
|
} @else {
|
|
<a
|
|
#rla="routerLinkActive"
|
|
class="no-min-width overflow-hidden px-2"
|
|
mat-tab-link
|
|
routerLinkActive
|
|
[active]="rla.isActive"
|
|
[routerLink]="tab.routerLink"
|
|
[routerLinkActiveOptions]="{ exact: true }"
|
|
>
|
|
<ng-container
|
|
*ngTemplateOutlet="tabContent; context: { $implicit: tab }"
|
|
/>
|
|
</a>
|
|
}
|
|
}
|
|
}
|
|
</nav>
|
|
|
|
<ng-template #tabContent let-tab>
|
|
<span class="align-items-center d-flex justify-content-start text-left w-100">
|
|
<ion-icon
|
|
class="flex-shrink-0"
|
|
[name]="tab.iconName"
|
|
[size]="deviceType === 'mobile' ? 'large' : 'small'"
|
|
/>
|
|
<span
|
|
class="d-none d-sm-block line-height-normal ms-1 overflow-hidden p-0 text-truncate"
|
|
[innerHTML]="tab.label"
|
|
></span>
|
|
</span>
|
|
</ng-template>
|
|
|