From 1a8fd23b05b44de8dc68c1273c5dec2c7c44b862 Mon Sep 17 00:00:00 2001
From: hunicus <93150691+hunicus@users.noreply.github.com>
Date: Wed, 15 Dec 2021 22:55:29 -0500
Subject: [PATCH] Add links and styling to fixed desktop docs nav

---
 .../components/docs/api-docs.component.html   | 66 ++++++++++++++++++-
 .../components/docs/api-docs.component.scss   | 38 ++++++++++-
 2 files changed, 101 insertions(+), 3 deletions(-)

diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html
index 6fe7110ae..40aed1cd9 100644
--- a/frontend/src/app/components/docs/api-docs.component.html
+++ b/frontend/src/app/components/docs/api-docs.component.html
@@ -4,7 +4,71 @@
     <div id="restAPI" *ngIf="restTabActivated">
 
       <div class="doc-nav-desktop" [ngClass]="docsNavPosition">
-        Placeholder.
+
+        <p *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">General</p>
+        <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" href="#">GET Difficulty Adjustment</a>
+
+        <p *ngIf="network.val === 'bisq'">Markets</p>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Market Currencies</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Market Depth</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Market HLOC</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Markets</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Market Offers</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Market Ticker</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Market Trades</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Market Volumes</a>
+
+        <p *ngIf="network.val === 'bisq'">General</p>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Stats</a>
+
+        <p>Addresses</p>
+        <a href="#">GET Address</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Address Transactions</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Address Transactions Chain</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Address Transactions Mempool</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Address UTXO</a>
+
+        <p *ngIf="network.val === 'liquid'">Assets</p>
+        <a *ngIf="network.val === 'liquid'" href="#">GET Assets</a>
+        <a *ngIf="network.val === 'liquid'" href="#">GET Asset Transactions</a>
+        <a *ngIf="network.val === 'liquid'" href="#">GET Asset Supply</a>
+
+        <p>Blocks</p>
+        <a href="#">GET Block</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Header</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Height</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Raw</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Status</a>
+        <a href="#">GET Block Tip Height</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Tip Hash</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Transaction ID</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Transaction IDs</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Block Transactions</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Blocks</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Blocks</a>
+
+        <p *ngIf="network.val !== 'bisq'">Fees</p>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Mempool Blocks Fees</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Recommended Fees</a>
+
+        <p *ngIf="network.val !== 'bisq'">Mempool</p>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Mempool</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Mempool Transaction IDs</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Mempool Recent</a>
+
+        <p>Transactions</p>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Children Pay for Parent</a>
+        <a href="#">GET Transaction</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Hex</a>
+        <a *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" href="#">GET Transaction Merkleblock Proof</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Merkle Proof</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Outspend</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Outspends</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Raw</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">GET Transaction Status</a>
+        <a *ngIf="network.val === 'bisq'" href="#">GET Transactions</a>
+        <a *ngIf="network.val !== 'bisq'" href="#">POST Transaction</a>
+
       </div>
 
       <div class="doc-content">
diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss
index 8049ef9aa..089e8d2cf 100644
--- a/frontend/src/app/components/docs/api-docs.component.scss
+++ b/frontend/src/app/components/docs/api-docs.component.scss
@@ -73,27 +73,61 @@ li.nav-item {
 }
 
 .doc-nav-desktop {
-  width: 25%;
+  width: 300px;
 }
 
 .doc-nav-desktop.relative {
   float: left;
+  overflow: hidden;
 }
 
 .doc-nav-desktop.fixed {
   float: unset;
   position: fixed;
   top: 20px;
+  overflow-y: auto;
+  height: calc(100vh - 50px);
+  scrollbar-color: #2d3348 #11131f;
+  scrollbar-width: thin;
+}
+::-webkit-scrollbar {
+  width: 3px;
+}
+::-webkit-scrollbar-track {
+  background: #11131f;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #2d3348;
+  border-radius: 5px;
+  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: 75%;
+  width: calc(100% - 330px);
   float: right;
 }
 
 @media (max-width: 992px){
   .doc-nav-desktop {
     display: none;
+    height: auto;
   }
 
   .doc-content {