You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
RTL/src/app/pages/navigation/side-navigation/side-navigation.component.html

66 lines
5.5 KiB
HTML

<mat-toolbar color="primary" [fxLayoutAlign] = "settings.menuType === 'Mini' ? 'center center' : 'space-between center'">
<a *ngIf="settings.menuType === 'Mini'" routerLink="/home" class="logo padding-gap-x mat-elevation-z6">R</a>
<a *ngIf="settings.menuType !== 'Mini'" routerLink="/home" class="logo">RTL</a>
<svg *ngIf="settings.menuType !== 'Mini' && !smallScreen" style="width:24px;height:24px;cursor:pointer;" viewBox="0 0 24 24"
(click)="settings.flgSidenavPinned = !settings.flgSidenavPinned">
<path fill="currentColor" *ngIf="!settings.flgSidenavPinned" d="M16,12V4H17V2H7V4H8V12L6,14V16H11.2V22H12.8V16H18V14L16,12Z" />
<path fill="currentColor" *ngIf="settings.flgSidenavPinned" d="M2,5.27L3.28,4L20,20.72L18.73,22L12.8,16.07V22H11.2V16H6V14L8,12V11.27L2,5.27M16,12L18,14V16H17.82L8,6.18V4H7V2H17V4H16V12Z" />
</svg>
</mat-toolbar>
<div fxLayout="row" fxLayoutAlign="start center" class="lnd-info pl-2" *ngIf="settings.menuType !== 'Mini'">
<div fxLayout="column">
<p class="name">Alias: <mat-spinner [diameter]="20" *ngIf="flgLoading" class="inline-spinner"></mat-spinner>{{information?.alias}}</p>
<p>Chain: <mat-spinner [diameter]="20" *ngIf="flgLoading" class="inline-spinner"></mat-spinner>{{informationChain.chain | titlecase}}<span> [{{informationChain.network | titlecase}}]</span></p>
<p class="name">LND Version: <mat-spinner [diameter]="20" *ngIf="flgLoading" class="inline-spinner"></mat-spinner>{{information?.version}}</p>
</div>
</div>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControl" *ngIf="settings.menuType !== 'Compact'">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle (click)="onChildNavClicked(node)" matTreeNodePadding [matTreeNodePaddingIndent]="settings.menuType === 'Mini' ? 28 : 40" routerLinkActive="active-link" routerLink="{{node.link}}">
<mat-icon class="mr-1" matTooltip="{{node.name}}" matTooltipPosition="right" [matTooltipDisabled]="settings.menuType !== 'Mini'">{{node.icon}}<span *ngIf="node.name === 'Pending' && settings.menuType === 'Mini'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></mat-icon>
<span *ngIf="settings.menuType !== 'Mini'">{{node.name}}<span *ngIf="node.name === 'Pending'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></span>
</mat-tree-node>
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" matTreeNodeToggle (click)="toggleTree(node)">
<div fxFlex="89" fxLayoutAlign="start center">
<mat-icon class="mr-1" matTooltip="{{node.name}}" matTooltipPosition="right" [matTooltipDisabled]="settings.menuType !== 'Mini'">{{node.icon}}</mat-icon><span *ngIf="settings.menuType !== 'Mini'">{{node.name}}</span>
</div>
<button fxFlex="11" fxLayoutAlign="end center" mat-icon-button matTreeNodeToggle [attr.aria-label]="'toggle ' + node.name" fxLayoutAlign="end center">
<mat-icon class="mat-icon-rtl-mirror"> {{treeControl.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType !== 'Compact' && showLogout" class="mt-minus-1">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding [matTreeNodePaddingIndent]="settings.menuType === 'Mini' ? 28 : 40" (click)="onClick(node)">
<mat-icon class="mr-1" matTooltip="{{node.name}}" matTooltipPosition="right" [matTooltipDisabled]="settings.menuType !== 'Mini'">{{node.icon}}</mat-icon>
<span *ngIf="settings.menuType !== 'Mini'">{{node.name}}</span>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenus" [treeControl]="treeControl" *ngIf="settings.menuType === 'Compact'">
<mat-tree-node fxLayout="column" fxLayoutAlign="center center" *matTreeNodeDef="let node" matTreeNodeToggle (click)="onChildNavClicked(node)" matTreeNodePadding matTreeNodePaddingIndent="60" routerLinkActive="active-link" routerLink="{{node.link}}">
<mat-icon class="mat-icon-36">{{node.icon}}</mat-icon>
<span>{{node.name}}<span *ngIf="node.name === 'Pending'" [matBadgeHidden]="numPendingChannels<1" matBadge="{{numPendingChannels}}" matBadgeOverlap="false" matBadgeColor="accent"></span></span>
</mat-tree-node>
<mat-tree-node fxLayout="row" *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
<div class="ml-8" fxLayout="column" fxLayoutAlign="center center" matTreeNodeToggle (click)="toggleTree(node)">
<mat-icon class="mat-icon-36">{{node.icon}}</mat-icon>
<span>{{node.name}}</span>
</div>
<div fxLayout="column" fxLayoutAlign="center center" matTreeNodeToggle (click)="toggleTree(node)">
<button mat-icon-button [attr.aria-label]="'toggle ' + node.name" matTreeNodeToggle>
<mat-icon class="mat-icon-rtl-mirror"> {{treeControl.isExpanded(node) ? 'arrow_drop_up' : 'arrow_drop_down'}}</mat-icon>
</button>
</div>
</mat-tree-node>
</mat-tree>
<mat-tree [dataSource]="navMenusLogout" [treeControl]="treeControlLogout" *ngIf="settings.menuType === 'Compact' && showLogout" class="mt-minus-1">
<mat-tree-node fxLayout="column" fxLayoutAlign="center center" *matTreeNodeDef="let node" matTreeNodePadding matTreeNodePaddingIndent="60" (click)="onClick(node)">
<mat-icon class="mat-icon-36">{{node.icon}}</mat-icon>
<span>{{node.name}}</span>
</mat-tree-node>
</mat-tree>