Dynamic dropdown.

This commit is contained in:
softsimon
2021-07-28 22:32:13 +03:00
parent ca306f5727
commit 2e5e51d055
16 changed files with 97 additions and 20 deletions

View File

@@ -1,4 +1,3 @@
<ng-container *ngIf="{ val: network$ | async } as network">
<header>
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" [routerLink]="['/' | relativeUrl]" style="position: relative;">
@@ -11,8 +10,22 @@
</ng-container>
</a>
<div ngbDropdown display="dynamic" class="dropdown-container" *ngIf="env.TESTNET_ENABLED || env.SIGNET_ENABLED || env.LIQUID_ENABLED || env.BISQ_ENABLED">
<button ngbDropdownToggle type="button" class="btn btn-secondary dropdown-toggle-split" aria-haspopup="true">
<img src="./resources/liquid-logo.png" style="width: 25px; height: 25px;" class="mr-1">
</button>
<div ngbDropdownMenu>
<a href="https://mempool.space" ngbDropdownItem class="mainnet"><img src="./resources/bitcoin-logo.png" style="width: 30px;" class="mr-1"> Mainnet</a>
<a href="https://mempool.space/signet" ngbDropdownItem *ngIf="env.SIGNET_ENABLED" class="signet"><img src="./resources/signet-logo.png" style="width: 30px;" class="mr-1"> Signet</a>
<a href="https://mempool.space/testnet" ngbDropdownItem *ngIf="env.TESTNET_ENABLED" class="testnet"><img src="./resources/testnet-logo.png" style="width: 30px;" class="mr-1"> Testnet</a>
<h6 class="dropdown-header" i18n="master-page.layer2-networks-header">Layer 2 Networks</h6>
<a href="https://bisq.markets" ngbDropdownItem class="mainnet"><img src="./resources/bisq-logo.png" style="width: 30px;" class="mr-1"> Bisq</a>
<button ngbDropdownItem class="liquid active" routerLink="/"><img src="./resources/liquid-logo.png" style="width: 30px;" class="mr-1"> Liquid</button>
</div>
</div>
<div class="navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav {{ network.val }}">
<ul class="navbar-nav liquid">
<li class="nav-item" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">
<a class="nav-link" [routerLink]="['/' | relativeUrl]" (click)="collapse()"><fa-icon [icon]="['fas', 'tachometer-alt']" [fixedWidth]="true" i18n-title="master-page.dashboard" title="Dashboard"></fa-icon></a>
</li>
@@ -44,6 +57,4 @@
<router-outlet></router-outlet>
<br>
</ng-container>
<br>

View File

@@ -74,7 +74,7 @@ li.nav-item {
@media (min-width: 576px) {
.navbar-brand {
width: 140px;
width: 120px;
}
}
@@ -86,7 +86,7 @@ nav {
position: absolute;
top: 13px;
left: 0px;
width: 140px;
width: 120px;
}
.badge {

View File

@@ -9,7 +9,6 @@ import { Observable} from 'rxjs';
})
export class LiquidMasterPageComponent implements OnInit {
env: Env;
network$: Observable<string>;
connectionState$: Observable<number>;
navCollapsed = false;
isMobile = window.innerWidth <= 767.98;