RTL/src/app/shared/components/settings-nav/settings-nav.component.html

<mat-toolbar color="primary" fxLayoutAlign = "space-between center" class="">
  <h4>Settings</h4>
</mat-toolbar>
<div fxLayout="column" class="container">
  <button fxLayoutAlign="center center" mat-raised-button color="accent" class="mt-2" type="reset" (click)="onClose()">Close</button>
  <div fxLayout="column">
    <div *ngIf="appConfig.nodes.length > 1">
      <h4>Switch Node</h4>
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <div tabindex="1" fxFlex="100">
          <mat-form-field fxFlex="100">
            <mat-select (selectionChange)="onSelectionChange($event.value)" [value]="selNode">
              <mat-option *ngFor="let node of appConfig.nodes" [value]="node">
                {{node.lnNode}} ({{node.lnImplementation}})
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </div>
      <mat-divider></mat-divider>
    </div>
    <div *ngIf="selNode.lnImplementation !== 'CLT'">
      <h4>Currency Unit</h4>
      <div fxLayout="row" fxLayoutAlign="space-between center">
        <span>{{currencyUnit}}</span>
        <mat-slide-toggle [checked]="selNode?.settings?.satsToBTC" (change)="toggleSettings('satsToBTC')" labelPosition="before"></mat-slide-toggle>
      </div>
      <mat-divider class="mt-2"></mat-divider>
    </div>
    <div *ngIf="showSettingOption">
      <h4>Menu</h4>
      <mat-radio-group [(ngModel)]="selectedMenu" (change)="chooseMenu()">
        <mat-radio-button *ngFor="let menu of menus" [value]="menu">{{menu}}</mat-radio-button>
      </mat-radio-group>
      <mat-divider class="mt-2"></mat-divider>
    </div>
    <h4>Menu Type</h4>
    <mat-radio-group [(ngModel)]="selectedMenuType" (change)="chooseMenuType()">
      <mat-radio-button *ngFor="let menuType of menuTypes" [value]="menuType">{{menuType}}</mat-radio-button>
    </mat-radio-group>
    <mat-divider class="mt-2"></mat-divider>
    <div *ngIf="showSettingOption">
      <div fxLayout="column">
        <h4>Sidenav Options</h4>
        <div fxLayout="row" fxLayoutAlign="space-between center">
          <span>Opened</span>
          <mat-slide-toggle [checked]="selNode?.settings?.flgSidenavOpened" (change)="toggleSettings('flgSidenavOpened')"
            labelPosition="before"></mat-slide-toggle>
        </div>
        <div fxLayout="row" fxLayoutAlign="space-between center">
          <span>Pinned</span>
          <mat-slide-toggle [checked]="selNode?.settings?.flgSidenavPinned" (change)="toggleSettings('flgSidenavPinned')"
            labelPosition="before"></mat-slide-toggle>
        </div>
      </div>
      <mat-divider class="mt-2"></mat-divider>
    </div>
    <h4>Skins</h4>
    <div fxLayout="row" fxLayoutAlign="start start" class="p-0">
      <div class="skin dark-purple m-1px" (click)="changeTheme('purple-white-dark-theme')"></div>
      <div class="skin dark-blue m-1px" (click)="changeTheme('dark-blue')"></div>
      <div class="skin dark-green m-1px" (click)="changeTheme('dark-green')"></div>
      <div class="skin dark-pink m-1px" (click)="changeTheme('dark-pink')"></div>
    </div>
    <div fxLayout="row" fxLayoutAlign="start start" class="p-0">
      <div class="skin light-purple m-1px" (click)="changeTheme('purple-white-light-theme')"></div>
      <div class="skin light-blue m-1px" (click)="changeTheme('light-blue')"></div>
      <div class="skin light-teal m-1px" (click)="changeTheme('light-teal')"></div>
      <div class="skin light-blue-gray m-1px" (click)="changeTheme('light-blue-gray')"></div>
    </div>
  </div>
</div>