Separate docs-nav into new component

Since same markup will be needed for desktop
and mobile menus.

frontend/src/app/app.module.ts

@@ -50,6 +50,7 @@ import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, fa
   faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook, faListUl } from '@fortawesome/free-solid-svg-icons';
 import { ApiDocsComponent } from './components/docs/api-docs.component';
 import { DocsComponent } from './components/docs/docs.component';
+import { ApiDocsNavComponent } from './components/docs/api-docs-nav.component';
 import { CodeTemplateComponent } from './components/docs/code-template.component';
 import { TermsOfServiceComponent } from './components/terms-of-service/terms-of-service.component';
 import { PrivacyPolicyComponent } from './components/privacy-policy/privacy-policy.component';
@@ -101,6 +102,7 @@ import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
     SponsorComponent,
     PushTransactionComponent,
     DocsComponent,
+    ApiDocsNavComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),

frontend/src/app/components/docs/api-docs-nav.component.html

@@ -0,0 +1,63 @@
+<p *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">General</p>
+<a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-difficulty-adjustment">GET Difficulty Adjustment</a>
+
+<p *ngIf="network.val === 'bisq'">Markets</p>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-currencies">GET Market Currencies</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-depth">GET Market Depth</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-hloc">GET Market HLOC</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-markets">GET Markets</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-offers">GET Market Offers</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-ticker">GET Market Ticker</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-trades">GET Market Trades</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-volumes">GET Market Volumes</a>
+
+<p *ngIf="network.val === 'bisq'">General</p>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-stats">GET Stats</a>
+
+<p>Addresses</p>
+<a [routerLink]="['./']" fragment="get-address">GET Address</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions">GET Address Transactions</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-chain">GET Address Transactions Chain</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-mempool">GET Address Transactions Mempool</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-utxo">GET Address UTXO</a>
+
+<p *ngIf="network.val === 'liquid'">Assets</p>
+<a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-assets">GET Assets</a>
+<a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-transactions">GET Asset Transactions</a>
+<a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-supply">GET Asset Supply</a>
+
+<p>Blocks</p>
+<a [routerLink]="['./']" fragment="get-block">GET Block</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-header">GET Block Header</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-height">GET Block Height</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-raw">GET Block Raw</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-status">GET Block Status</a>
+<a [routerLink]="['./']" fragment="get-block-tip-height">GET Block Tip Height</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-tip-hash">GET Block Tip Hash</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-id">GET Block Transaction ID</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-ids">GET Block Transaction IDs</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transactions">GET Block Transactions</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a>
+
+<p *ngIf="network.val !== 'bisq'">Fees</p>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-blocks-fees">GET Mempool Blocks Fees</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-recommended-fees">GET Recommended Fees</a>
+
+<p *ngIf="network.val !== 'bisq'">Mempool</p>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool">GET Mempool</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-transaction-ids">GET Mempool Transaction IDs</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-recent">GET Mempool Recent</a>
+
+<p>Transactions</p>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-cpfp">GET Children Pay for Parent</a>
+<a [routerLink]="['./']" fragment="get-transaction">GET Transaction</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-hex">GET Transaction Hex</a>
+<a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-transaction-merkleblock-proof">GET Transaction Merkleblock Proof</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-merkle-proof">GET Transaction Merkle Proof</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspend">GET Transaction Outspend</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspends">GET Transaction Outspends</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-raw">GET Transaction Raw</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-status">GET Transaction Status</a>
+<a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-transactions">GET Transactions</a>
+<a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="post-transaction">POST Transaction</a>

frontend/src/app/components/docs/api-docs-nav.component.scss

@@ -0,0 +1,17 @@
+p {
+  color: #4a68b9;
+  font-weight: 700;
+  margin: 10px 0;
+  margin: 15px 0 10px 0;
+}
+
+p:first-child {
+  margin-top: 0
+}
+
+a {
+  color: #fff;
+  text-decoration: none;
+  display: block;
+  margin: 5px 0;
+}

frontend/src/app/components/docs/api-docs-nav.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-api-docs-nav',
+  templateUrl: './api-docs-nav.component.html',
+  styleUrls: ['./api-docs-nav.component.scss']
+})
+export class ApiDocsNavComponent implements OnInit {
+
+  @Input() network: any;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/src/app/components/docs/api-docs.component.html

@@ -4,71 +4,7 @@
     <div id="restAPI" *ngIf="restTabActivated">
 
       <div class="doc-nav-desktop hide-on-mobile" [ngClass]="desktopDocsNavPosition">
-
+        <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
-        <p *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">General</p>
-        <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-difficulty-adjustment">GET Difficulty Adjustment</a>
-
-        <p *ngIf="network.val === 'bisq'">Markets</p>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-currencies">GET Market Currencies</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-depth">GET Market Depth</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-hloc">GET Market HLOC</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-markets">GET Markets</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-offers">GET Market Offers</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-ticker">GET Market Ticker</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-trades">GET Market Trades</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-market-volumes">GET Market Volumes</a>
-
-        <p *ngIf="network.val === 'bisq'">General</p>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-stats">GET Stats</a>
-
-        <p>Addresses</p>
-        <a [routerLink]="['./']" fragment="get-address">GET Address</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions">GET Address Transactions</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-chain">GET Address Transactions Chain</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-transactions-mempool">GET Address Transactions Mempool</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-address-utxo">GET Address UTXO</a>
-
-        <p *ngIf="network.val === 'liquid'">Assets</p>
-        <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-assets">GET Assets</a>
-        <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-transactions">GET Asset Transactions</a>
-        <a *ngIf="network.val === 'liquid'" [routerLink]="['./']" fragment="get-asset-supply">GET Asset Supply</a>
-
-        <p>Blocks</p>
-        <a [routerLink]="['./']" fragment="get-block">GET Block</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-header">GET Block Header</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-height">GET Block Height</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-raw">GET Block Raw</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-status">GET Block Status</a>
-        <a [routerLink]="['./']" fragment="get-block-tip-height">GET Block Tip Height</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-tip-hash">GET Block Tip Hash</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-id">GET Block Transaction ID</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transaction-ids">GET Block Transaction IDs</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-block-transactions">GET Block Transactions</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-blocks">GET Blocks</a>
-
-        <p *ngIf="network.val !== 'bisq'">Fees</p>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-blocks-fees">GET Mempool Blocks Fees</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-recommended-fees">GET Recommended Fees</a>
-
-        <p *ngIf="network.val !== 'bisq'">Mempool</p>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool">GET Mempool</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-transaction-ids">GET Mempool Transaction IDs</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-mempool-recent">GET Mempool Recent</a>
-
-        <p>Transactions</p>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-cpfp">GET Children Pay for Parent</a>
-        <a [routerLink]="['./']" fragment="get-transaction">GET Transaction</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-hex">GET Transaction Hex</a>
-        <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" [routerLink]="['./']" fragment="get-transaction-merkleblock-proof">GET Transaction Merkleblock Proof</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-merkle-proof">GET Transaction Merkle Proof</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspend">GET Transaction Outspend</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-outspends">GET Transaction Outspends</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-raw">GET Transaction Raw</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="get-transaction-status">GET Transaction Status</a>
-        <a *ngIf="network.val === 'bisq'" [routerLink]="['./']" fragment="get-transactions">GET Transactions</a>
-        <a *ngIf="network.val !== 'bisq'" [routerLink]="['./']" fragment="post-transaction">POST Transaction</a>
-
       </div>
 
       <div class="doc-content">
@@ -80,7 +16,7 @@
           <div #collapse="ngbCollapse" [(ngbCollapse)]="mobileMenuOpen">
             <div class="card">
               <div class="card-body">
-                <p>Placeholder.</p>
+                <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
               </div>
             </div>
           </div>

frontend/src/app/components/docs/api-docs.component.scss

@@ -102,23 +102,6 @@ li.nav-item {
   border: none;
 }
 
-.doc-nav-desktop p {
-  color: #4a68b9;
-  font-weight: 700;
-  margin: 10px 0;
-  margin: 15px 0 10px 0;
-}
-.doc-nav-desktop p:first-child {
-  margin-top: 0
-}
-
-.doc-nav-desktop a {
-  color: #fff;
-  text-decoration: none;
-  display: block;
-  margin: 5px 0;
-}
-
 .doc-content {
   width: calc(100% - 330px);
   float: right;