Merge pull request #1027 from hunicus/change-docs-layout

Revamp docs layout

frontend/cypress/integration/bisq/bisq.spec.ts

@@ -59,9 +59,8 @@ describe('Bisq', () => {
             cy.visit(`${basePath}`);
             cy.waitForSkeletonGone();
             cy.get('li:nth-of-type(5) > a').click().then(() => {
-                cy.get('.card').should('have.length.at.least', 1);
+                cy.get('.section-header').should('have.length.at.least', 1);
-                cy.get('.card').first().click();
+                cy.get('.endpoint-container').should('have.length.at.least', 1);
-                cy.get('.card-body');
             });
         });
 

frontend/src/app/app.module.ts

@@ -48,9 +48,10 @@ import { FeesBoxComponent } from './components/fees-box/fees-box.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
 import { faFilter, faAngleDown, faAngleUp, faAngleRight, faAngleLeft, faBolt, faChartArea, faCogs, faCubes, faDatabase, faExchangeAlt, faInfoCircle,
-  faLink, faList, faSearch, faCaretUp, faCaretDown, faTachometerAlt, faThList, faTint, faTv, faAngleDoubleDown, faSortUp, faAngleDoubleUp, faChevronDown, faFileAlt, faRedoAlt, faArrowAltCircleRight, faExternalLinkAlt, faBook } from '@fortawesome/free-solid-svg-icons';
+  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';
@@ -59,6 +60,7 @@ import { StorageService } from './services/storage.service';
 import { HttpCacheInterceptor } from './services/http-cache.interceptor';
 import { SponsorComponent } from './components/sponsor/sponsor.component';
 import { PushTransactionComponent } from './components/push-transaction/push-transaction.component';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
 @NgModule({
   declarations: [
@@ -102,6 +104,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
     SponsorComponent,
     PushTransactionComponent,
     DocsComponent,
+    ApiDocsNavComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'serverApp' }),
@@ -111,6 +114,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
     BrowserAnimationsModule,
     InfiniteScrollModule,
     NgbTypeaheadModule,
+    NgbModule,
     FontAwesomeModule,
     SharedModule,
     NgxEchartsModule.forRoot({
@@ -161,5 +165,6 @@ export class AppModule {
     library.addIcons(faAngleRight);
     library.addIcons(faAngleLeft);
     library.addIcons(faBook);
+    library.addIcons(faListUl);
   }
 }

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

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

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

@@ -3,18 +3,31 @@
 
     <div id="restAPI" *ngIf="restTabActivated">
 
-      <p>Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
+      <div id="doc-nav-desktop" class="hide-on-mobile" [ngClass]="desktopDocsNavPosition">
+        <app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav>
+      </div>
+
+      <div class="doc-content">
+
+        <p class="hide-on-mobile no-bottom-space">Reference for the {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} <ng-container i18n="api-docs.title">API service</ng-container>.</p>
+
+        <div id="doc-nav-mobile" class="hide-on-desktop" *ngIf="showFloatingDocsNav">
+          <button type="button" class="btn btn-outline-primary" (click)="collapse.toggle()" [attr.aria-expanded]="mobileMenuOpen" aria-controls="collapseExample"><fa-icon [icon]="['fas', 'list-ul']" [fixedWidth]="true"></fa-icon> {{ network.val === '' ? 'Bitcoin' : network.val.charAt(0).toUpperCase() + network.val.slice(1) }} REST API Overview</button>
+          <div #collapse="ngbCollapse" [(ngbCollapse)]="mobileMenuOpen">
+            <div class="card">
+              <div class="card-body">
+                <app-api-docs-nav [collapseItem]="collapse" [network]="{ val: network$ | async }"></app-api-docs-nav>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div id="mobile-top-doc-nav" #mobileFixedApiNav class="hide-on-desktop"><app-api-docs-nav [network]="{ val: network$ | async }"></app-api-docs-nav></div>
 
         <div class="api-category" *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">
-        <h4 i18n="api-docs.tab.general|API Docs tab for General">General</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
 
-          <ngb-panel id="difficultyAdjustment" *ngIf="network.val !== 'liquid'">
+          <div class="endpoint-container" id="get-difficulty-adjustment">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-difficulty-adjustment">GET Difficulty Adjustment <span>General</span></a>
-              <span>GET Difficulty Adjustment</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="difficulty">
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.difficulty)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/difficulty-adjustment</a>
@@ -25,21 +38,13 @@
             </div>
             <app-code-template [hostname]="hostname" [code]="code.difficulty" [network]="network.val" ></app-code-template>
           </div>
-            </ng-template>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category" *ngIf="network.val === 'bisq'">
-        <h4 i18n="Bisq All Markets">Markets</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
-          <ngb-panel id="bisqMarketsCurrencies">
+          <div class="endpoint-container" id="get-market-currencies">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-market-currencies">GET Market Currencies <span>Markets</span></a>
-              <span>GET Market Currencies</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.marketsCurrencies)" target="_blank">GET {{ baseNetworkUrl }}/api/currencies</a>
@@ -49,14 +54,10 @@
               <div i18n>Provides list of available currencies for a given base currency. </div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.marketsCurrencies" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="marketDepth">
+          <div class="endpoint-container" id="get-market-depth">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-market-depth">GET Market Depth <span>Markets</span></a>
-              <span>GET Market Depth</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.marketDepth)" target="_blank">GET {{ baseNetworkUrl }}/api/depth?market=[:market]</a>
@@ -66,14 +67,10 @@
               <div i18n>Provides list of open offer prices for a single market.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.marketDepth" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="bisqMarketsHloc">
+          <div class="endpoint-container" id="get-market-hloc">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-market-hloc">GET Market HLOC <span>Markets</span></a>
-              <span>GET Market HLOC</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.marketHloc)" target="_blank">GET {{ baseNetworkUrl }}/api/hloc?market=[:market]</a>
@@ -83,14 +80,10 @@
               <div i18n>Provides hi/low/open/close data for a given market. This can be used to generate a candlestick chart.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.marketHloc" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="bisqMarketsMarkets">
+          <div class="endpoint-container" id="get-markets">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-markets">GET Markets <span>Markets</span></a>
-              <span>GET Markets</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.markets)" target="_blank">GET {{ baseNetworkUrl }}/api/markets</a>
@@ -100,14 +93,10 @@
               <div i18n>Provides list of available markets.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.markets" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="bisqMarketsOffers">
+          <div class="endpoint-container" id="get-market-offers">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-market-offers">GET Market Offers <span>Markets</span></a>
-              <span>GET Market Offers</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.marketOffers)" target="_blank">GET {{ baseNetworkUrl }}/api/offers?market=[:market]</a>
@@ -117,14 +106,10 @@
               <div i18n>Provides list of open offer details for a single market.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.marketOffers" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="bisqMarketsTicker">
+          <div class="endpoint-container" id="get-market-ticker">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-market-ticker">GET Market Ticker <span>Markets</span></a>
-              <span>GET Market Ticker</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.marketTicker)" target="_blank">GET {{ baseNetworkUrl }}/api/ticker?market=[:market]</a>
@@ -134,14 +119,10 @@
               <div i18n>Provides 24 hour price ticker for single market or all markets</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.marketTicker" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="bisqMarketsTrades">
+          <div class="endpoint-container" id="get-market-trades">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-market-trades">GET Market Trades <span>Markets</span></a>
-              <span>GET Market Trades</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.marketTrades)" target="_blank">GET {{ baseNetworkUrl }}/api/trades?market=[:market]&limit=[:limit]</a>
@@ -151,14 +132,10 @@
               <div i18n>Provides list of completed trades for a single market.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.marketTrades" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="bisqMarketsVolumes">
+          <div class="endpoint-container" id="get-market-volumes">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-market-volumes">GET Market Volumes <span>Markets</span></a>
-              <span>GET Market Volumes</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.marketVolumes)" target="_blank">GET {{ baseNetworkUrl }}/api/volumes?basecurrency=[:basecurrency]</a>
@@ -168,21 +145,14 @@
               <div i18n>Provides periodic volume data in terms of base currency for one or all markets.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.marketVolumes" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category" *ngIf="network.val === 'bisq'">
-        <h4 ngbNavLink i18n="api-docs.tab.bsq|API Docs tab for BSQ">General</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
-          <ngb-panel id="bisqStats">
+          <div class="endpoint-container" id="get-stats">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-stats">GET Stats <span>General</span></a>
-              <span>GET Stats</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.stats)" target="_blank'" target="_blank">GET {{ baseNetworkUrl }}/api/stats</a>
@@ -192,21 +162,14 @@
               <div i18n>Returns statistics about all Bisq transactions.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.stats" [network]="network.val"></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category">
-        <h4 i18n="api-docs.tab.addresses|API Docs tab for Addresses">Addresses</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
-          <ngb-panel id="address">
+          <div class="endpoint-container" id="get-address">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-address">GET Address <span>Addresses</span></a>
-              <span>GET Address</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.address)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address</a>
@@ -216,14 +179,10 @@
                 <div i18n>Returns details about an address. Available fields: <code>address</code>, <code>chain_stats</code>, and <code>mempool_stats</code>. {{ '{' }}chain,mempool{{ '}' }}_stats each contain an object with <code>tx_count</code>, <code>funded_txo_count</code>, <code>funded_txo_sum</code>, <code>spent_txo_count</code>, and <code>spent_txo_sum</code>.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.address" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'"  id="addressTransactions">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-address-transactions">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-address-transactions">GET Address Transactions <span>Addresses</span></a>
-              <span>GET Address Transactions</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.addressTransactions)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs</a>
@@ -233,14 +192,10 @@
               <div i18n>Get transaction history for the specified address/scripthash, sorted with newest first. Returns up to 50 mempool transactions plus the first 25 confirmed transactions. You can request more confirmed transactions using <code>:last_seen_txid</code> (see below).</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.addressTransactions" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="addressTransactionsChain">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-address-transactions-chain">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-address-transactions-chain">GET Address Transactions Chain <span>Addresses</span></a>
-              <span>GET Address Transactions Chain</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.addressTransactionsChain)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs/chain</a>
@@ -250,14 +205,10 @@
               <div i18n>Get confirmed transaction history for the specified address/scripthash, sorted with newest first. Returns 25 transactions per page. More can be requested by specifying the last txid seen by the previous query.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.addressTransactionsChain" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="addressTransactionsMempool">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-address-transactions-mempool">
-            <ng-template ngbPanelTitle>
+              <a class="section-header" [routerLink]="['./']" fragment="get-address-transactions-mempool">GET Address Transactions Mempool <span>Addresses</span></a>
-              <span>GET Address Transactions Mempool</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
               <div class="endpoint">
                 <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                 <a [href]="wrapUrl(network.val, code.addressTransactionsMempool)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/txs/mempool</a>
@@ -267,14 +218,10 @@
                 <div i18n>Get unconfirmed transaction history for the specified address/scripthash. Returns up to 50 transactions (no paging).</div>
               </div>
               <app-code-template [hostname]="hostname" [code]="code.addressTransactionsMempool" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="addressUTXO">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-address-utxo">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-address-utxo">GET Address UTXO <span>Addresses</span></a>
-              <span>GET Address UTXO</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.addressUTXO)" target="_blank">GET {{ baseNetworkUrl }}/api/address/:address/utxo</a>
@@ -284,21 +231,14 @@
               <div i18n>Get the list of unspent transaction outputs associated with the address/scripthash. Available fields: <code>txid</code>, <code>vout</code>, <code>value</code>, and <code>status</code> (with the status of the funding tx).<ng-container *ngIf="network.val === 'liquid'">There is also a <code>valuecommitment</code> field that may appear in place of <code>value</code>, plus the following additional fields: <code>asset</code>/<code>assetcommitment</code>, <code>nonce</code>/<code>noncecommitment</code>, <code>surjection_proof</code>, and <code>range_proof</code>.</ng-container></div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.addressUTXO" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category" *ngIf="network.val === 'liquid'">
-        <h4 i18n="api-docs.tab.assets|API Docs tab for Assets">Assets</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
-          <ngb-panel id="assets">
+          <div class="endpoint-container" id="get-assets">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-assets">GET Assets <span>Assets</span></a>
-              <span>GET Assets</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.assets)" target="_blank">GET /liquid/api/asset/:asset_id</a>
@@ -308,14 +248,10 @@
               <div i18n>Returns information about a Liquid asset.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.assets" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="assetTransactions">
+          <div class="endpoint-container" id="get-asset-transactions">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-asset-transactions">GET Asset Transactions <span>Assets</span></a>
-              <span>GET Asset Transactions</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <a [href]="wrapUrl(network.val, code.assetTransactions)" target="_blank">GET /liquid/api/asset/:asset_id/txs[/mempool|/chain]</a>
             </div>
@@ -324,14 +260,10 @@
               <div i18n>Returns transactions associated with the specified Liquid asset. For the network's native asset, returns a list of peg in, peg out, and burn transactions. For user-issued assets, returns a list of issuance, reissuance, and burn transactions. Does not include regular transactions transferring this asset.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.assetTransactions" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="assetSupply">
+          <div class="endpoint-container" id="get-asset-supply">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-asset-supply">GET Asset Supply <span>Assets</span></a>
-              <span>GET Asset Supply</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.assetSupply)" target="_blank">GET /liquid/api/asset/:asset_id/supply[/decimal]</a>
@@ -341,21 +273,14 @@
               <div i18n>Get the current total supply of the specified asset. For the native asset (L-BTC), this is calculated as [chain,mempool]_stats.peg_in_amount - [chain,mempool]_stats.peg_out_amount - [chain,mempool]_stats.burned_amount. For issued assets, this is calculated as [chain,mempool]_stats.issued_amount - [chain,mempool]_stats.burned_amount. Not available for assets with blinded issuances. If /decimal is specified, returns the supply as a decimal according to the asset's divisibility. Otherwise, returned in base units.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.assetSupply" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category">
-        <h4 i18n="api-docs.tab.blocks|API Docs tab for Blocks">Blocks</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
-          <ngb-panel id="block">
+          <div class="endpoint-container" id="get-block">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block">GET Block <span>Blocks</span></a>
-              <span>GET Block</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.block)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash</a>
@@ -365,14 +290,10 @@
               <div i18n>Returns details about a block. Available fields: <code>id</code>, <code>height</code>, <code>version</code>, <code>timestamp</code>, <code>bits</code>, <code>nonce</code>, <code>merkle_root</code>, <code>tx_count</code>, <code>size</code>, <code>weight</code>,<ng-container *ngIf="network.val === 'liquid'"> <code>proof</code>,</ng-container> and <code>previousblockhash</code>.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.block" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockHeader">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-header">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-header">GET Block Header <span>Blocks</span></a>
-              <span>GET Block Header</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockHeader)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/header</a>
@@ -382,14 +303,10 @@
               <div i18n>Returns the hex-encoded block header.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockHeader" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockHeight">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-height">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-height">GET Block Height <span>Blocks</span></a>
-              <span>GET Block Height</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockHeader)" target="_blank">GET {{ baseNetworkUrl }}/api/block-height/:height</a>
@@ -399,15 +316,12 @@
               <div i18n>Returns the hash of the block currently at <code>:height</code>.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockHeight" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockRaw">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-raw">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-raw">GET Block Raw <span>Blocks</span></a>
-              <span>GET Block Raw</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
+              <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockRaw)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/raw</a>
             </div>
             <div class="description">
@@ -415,15 +329,10 @@
               <div i18n>Returns the raw block representation in binary.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockRaw" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockStatus">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-status">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-status">GET Block Status <span>Blocks</span></a>
-              <span>GET Block Status</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="title">Get Block Status</div>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockStatus)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/status</a>
@@ -433,14 +342,10 @@
               <div i18n>Returns the confirmation status of a block. Available fields: <code>in_best_chain</code> (boolean, false for orphaned blocks), <code>next_best</code> (the hash of the next block, only available for blocks in the best chain).</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockStatus" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="blockTipHeight">
+          <div class="endpoint-container" id="get-block-tip-height">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-tip-height">GET Block Tip Height <span>Blocks</span></a>
-              <span>GET Block Tip Height</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockTipHeight)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/tip/height</a>
@@ -450,14 +355,10 @@
               <div i18n>Returns the height of the last block.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockTipHeight" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTipHash">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-tip-hash">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-tip-hash">GET Block Tip Hash <span>Blocks</span></a>
-              <span>GET Block Tip Hash</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockTipHash)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/tip/hash</a>
@@ -467,14 +368,10 @@
               <div i18n>Returns the hash of the last block.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockTipHash" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxId">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-transaction-id">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-transaction-id">GET Block Transaction ID <span>Blocks</span></a>
-              <span>GET Block Transaction ID</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockTxId)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txid/:index</a>
@@ -484,14 +381,10 @@
               <div i18n>Returns the transaction at index <code>:index</code> within the specified block.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockTxId" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxIds">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-transaction-ids">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-transaction-ids">GET Block Transaction IDs <span>Blocks</span></a>
-              <span>GET Block Transaction IDs</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockTxIds)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txids</a>
@@ -501,14 +394,10 @@
               <div i18n>Returns a list of all txids in the block.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockTxIds" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blockTxs">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-block-transactions">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-block-transactions">GET Block Transactions <span>Blocks</span></a>
-              <span>GET Block Transactions</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blockTxs)" target="_blank">GET {{ baseNetworkUrl }}/api/block/:hash/txs[/:start_index]</a>
@@ -518,14 +407,10 @@
               <div i18n>Returns a list of transactions in the block (up to 25 transactions beginning at <code>start_index</code>). Transactions returned here do not have the <code>status</code> field, since all the transactions share the same block and confirmation status.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blockTxs" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="blocks">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-blocks">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-blocks">GET Blocks <span>Blocks</span></a>
-              <span>GET Blocks</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blocks)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks[/:start_height]</a>
@@ -535,14 +420,10 @@
               <div i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blocks" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val === 'bisq'" id="blocks">
+          <div class="endpoint-container" *ngIf="network.val === 'bisq'" id="get-blocks">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-blocks">GET Blocks <span>Blocks</span></a>
-              <span>GET Blocks</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.blocksBisq)" target="_blank">GET {{ baseNetworkUrl }}/api/blocks/:index/:length</a>
@@ -552,21 +433,14 @@
               <div i18n>Returns the 10 newest blocks starting at the tip or at <code>:start_height</code> if specified.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.blocksBisq" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category" *ngIf="network.val !== 'bisq'">
-        <h4 i18n="api-docs.tab.fees|API Docs tab for Fees">Fees</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark">
 
-          <ngb-panel id="feeMempoolBlocks">
+          <div class="endpoint-container" id="get-mempool-blocks-fees">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-mempool-blocks-fees">GET Mempool Blocks Fees <span>Fees</span></a>
-              <span>GET Mempool Blocks Fees</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.feeMempoolBlocks)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/fees/mempool-blocks</a>
@@ -576,14 +450,10 @@
               <div i18n="api-docs.fees.mempool-blocks|API Docs for /api/v1/fees/mempool-blocks">Returns current mempool as projected blocks.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.feeMempoolBlocks" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="feeRecommended">
+          <div class="endpoint-container" id="get-recommended-fees">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-recommended-fees">GET Recommended Fees <span>Fees</span></a>
-              <span>GET Recommended Fees</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.feeRecommended)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/fees/recommended</a>
@@ -593,21 +463,14 @@
               <div i18n="api-docs.fees.recommended|API Docs for /api/v1/fees/recommended">Returns our currently suggested fees for new transactions.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.feeRecommended" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category" *ngIf="network.val !== 'bisq'">
-        <h4 i18n="api-docs.tab.mempool|API Docs tab for Mempool">Mempool</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
-          <ngb-panel id="mempool">
+          <div class="endpoint-container" id="get-mempool">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-mempool">GET Mempool <span>Fees</span></a>
-              <span>GET Mempool</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.mempool)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool</a>
@@ -617,14 +480,10 @@
               <div i18n="api-docs.mempool.mempool|API Docs for /api/mempool">Returns current mempool backlog statistics.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.mempool" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="mempoolTxs">
+          <div class="endpoint-container" id="get-mempool-transaction-ids">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-mempool-transaction-ids">GET Mempool Transactions IDs <span>Fees</span></a>
-              <span>GET Mempool Transactions IDs</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.mempoolTxs)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool/txids</a>
@@ -634,14 +493,10 @@
               <div i18n="api-docs.mempool.txids|API Docs for /api/mempool/txids">Get the full list of txids in the mempool as an array. The order of the txids is arbitrary and does not match bitcoind.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.mempoolTxs" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="mempoolRecent">
+          <div class="endpoint-container" id="get-mempool-recent">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-mempool-recent">GET Mempool Recent <span>Fees</span></a>
-              <span>GET Mempool Recent</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.mempoolRecent)" target="_blank">GET {{ baseNetworkUrl }}/api/mempool/recent</a>
@@ -651,21 +506,14 @@
               <div i18n="api-docs.mempool.recent|API Docs for /api/mempool/recent">Get a list of the last 10 transactions to enter the mempool. Each transaction object contains simplified overview data, with the following fields: <code>txid</code>, <code>fee</code>, <code>vsize</code>, and <code>value</code>.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.mempoolRecent" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
         </div>
 
         <div class="api-category">
-        <h4 i18n="api-docs.tab.transactions|API Docs tab for Transactions">Transactions</h4>
-        <ngb-accordion [closeOthers]="true" animated="true" type="dark" >
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="cpfp">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-cpfp">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-cpfp">GET Children Pay for Parent <span>Transactions</span></a>
-              <span>GET Children Pay for Parent</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionCpfp)" target="_blank">GET {{ baseNetworkUrl }}/api/v1/cpfp/:txid</a>
@@ -675,15 +523,12 @@
               <div i18n="api-docs.fees.cpfp|API Docs for /api/v1/fees/cpfp">Returns the ancestors and the best descendant fees for a transaction.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionCpfp" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel id="transaction">
+          <div class="endpoint-container" id="get-transaction">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction">GET Transaction <span>Transactions</span></a>
-              <span>GET Transaction</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
+              <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transaction)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid</a>
             </div>
             <div class="description">
@@ -691,14 +536,10 @@
               <div i18n>Returns details about a transaction. Available fields: <code>txid</code>, <code>version</code>, <code>locktime</code>, <code>size</code>, <code>weight</code>, <code>fee</code>, <code>vin</code>, <code>vout</code>, and <code>status</code>.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transaction" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionHex">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-transaction-hex">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction-hex">GET Transaction Hex <span>Transactions</span></a>
-              <span>GET Transaction Hex</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
                 <a [href]="wrapUrl(network.val, code.transactionHex)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/hex</a>
@@ -708,14 +549,10 @@
               <div i18n>Returns a transaction serialized as hex.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionHex" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" id="transactionMerkleBlockProof">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq' && network.val !== 'liquid'" id="get-transaction-merkleblock-proof">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction-merkleblock-proof">GET Transaction Merkleblock Proof <span>Transactions</span></a>
-              <span>GET Transaction Merkleblock Proof</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionMerkleBlockProof)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/merkleblock-proof</a>
@@ -725,14 +562,10 @@
               <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://bitcoin.org/en/glossary/merkle-block">bitcoind's merkleblock</a> format.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionMerkleBlockProof" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionMerkleProof">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-transaction-merkle-proof">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction-merkle-proof">GET Transaction Merkle Proof <span>Transactions</span></a>
-              <span>GET Transaction Merkle Proof</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionMerkleProof)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/merkle-proof</a>
@@ -742,14 +575,10 @@
               <div i18n>Returns a merkle inclusion proof for the transaction using <a href="https://electrumx.readthedocs.io/en/latest/protocol-methods.html#blockchain-transaction-get-merkle">Electrum's blockchain.transaction.get_merkle format.</a></div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionMerkleProof" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionOutspend">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-transaction-outspend">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction-outspend">GET Transaction Outspend <span>Transactions</span></a>
-              <span>GET Transaction Outspend</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionOutspend)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/outspend/:vout</a>
@@ -759,14 +588,10 @@
               <div i18n>Returns the spending status of a transaction output. Available fields: <code>spent</code> (boolean), <code>txid</code> (optional), <code>vin</code> (optional), and <code>status</code> (optional, the status of the spending tx).</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionOutspend" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionOutspends">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-transaction-outspends">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction-outspends">GET Transaction Outspends <span>Transactions</span></a>
-              <span>GET Transaction Outspends</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionOutspends)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/outspends</a>
@@ -776,14 +601,10 @@
               <div i18n>Returns the spending status of all transaction outputs.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionOutspends" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionRaw">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-transaction-raw">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction-raw">GET Transaction Raw <span>Transactions</span></a>
-              <span>GET Transaction Raw</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionRaw)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/raw</a>
@@ -793,14 +614,10 @@
               <div i18n>Returns a transaction as binary data.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionRaw" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="transactionStatus">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="get-transaction-status">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transaction-status">GET Transaction Status <span>Transactions</span></a>
-              <span>GET Transaction Status</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionStatus)" target="_blank">GET {{ baseNetworkUrl }}/api/tx/:txid/status</a>
@@ -810,15 +627,10 @@
               <div i18n>Returns the confirmation status of a transaction. Available fields: <code>confirmed</code> (boolean), <code>block_height</code> (optional), and <code>block_hash</code> (optional).</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionStatus" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val === 'bisq'" id="transactionsBisq">
+          <div class="endpoint-container" *ngIf="network.val === 'bisq'" id="get-transactions">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="get-transactions">GET Transactions <span>Transactions</span></a>
-              <span>GET Transactions</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
-              <div class="title">Get Mempool Txids</div>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <a [href]="wrapUrl(network.val, code.transactionsBisq)" target="_blank">GET {{ baseNetworkUrl }}/api/txs/:index/:length</a>
@@ -828,14 +640,10 @@
               <div i18n>Returns :length of latest Bisq transactions, starting from :index.</div>
             </div>
             <app-code-template [hostname]="hostname" [code]="code.transactionsBisq" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-          <ngb-panel *ngIf="network.val !== 'bisq'" id="postTransaction">
+          <div class="endpoint-container" *ngIf="network.val !== 'bisq'" id="post-transaction">
-            <ng-template ngbPanelTitle>
+            <a class="section-header" [routerLink]="['./']" fragment="post-transaction">POST Transaction <span>Transactions</span></a>
-              <span>POST Transaction</span>
-            </ng-template>
-            <ng-template ngbPanelContent>
             <div class="endpoint">
               <div class="subtitle" i18n="Api docs endpoint">Endpoint</div>
               <div>POST /api/tx</div>
@@ -845,10 +653,9 @@
               <div i18n>Broadcast a raw transaction to the network. The transaction should be provided as hex in the request body. The <code>txid</code> will be returned on success.</div>
             </div>
             <app-code-template [method]="'post'" [hostname]="hostname" [code]="code.transactionPost" [network]="network.val" ></app-code-template>
-            </ng-template>
+          </div>
-          </ngb-panel>
 
-        </ngb-accordion>
+        </div>
       </div>
     </div>
 
@@ -868,13 +675,5 @@
       </div>
     </div>
 
-    <br>
-
-    <div class="text-center">
-      <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
-      |
-      <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
-    </div>
-
   </div>
 </ng-container>

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

@@ -22,6 +22,10 @@ li.nav-item {
   }
 }
 
+.no-bottom-space {
+  margin-bottom: 0;
+}
+
 .nav-tabs .nav-link.active {
   border-bottom: 1px solid #fff;
   @media (min-width: 676px){
@@ -72,10 +76,131 @@ li.nav-item {
   padding: 15px;
 }
 
-#restAPI .api-category {
+#doc-nav-desktop {
-  margin: 30px 0;
+  width: 300px;
 }
 
-.api-category h4 {
+#doc-nav-desktop.relative {
-  margin-bottom: 15px;
+  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-content {
+  width: calc(100% - 330px);
+  float: right;
+}
+
+.endpoint-container:before {
+	display: block;
+ 	content: " ";
+  height: 1px;
+  margin-top: -1px;
+  visibility: hidden;
+}
+
+.endpoint-container .section-header {
+  display: block;
+  background-color: #2d3348;
+  color: #1bd8f4;
+  padding: 1rem 1.3rem 1rem 1.3rem;
+  font-weight: bold;
+  border-radius: 0.25rem;
+  margin: 20px 0 20px 0;
+  font-size: 24px;
+  position: relative;
+}
+.endpoint-container .section-header:hover {
+  text-decoration: none;
+}
+
+.endpoint-container .section-header span {
+  color: #fff;
+  background-color: #653b9c;
+  font-size: 12px;
+  text-transform: uppercase;
+  font-weight: 400;
+  padding: 8px 10px;
+  letter-spacing: 1px;
+  border-radius: 0.25rem;
+  font-family: monospace;
+  float: right;
+}
+
+#doc-nav-mobile {
+  position: fixed;
+  top: 20px;
+  width: calc(100% - 60px);
+  z-index: 100;
+}
+
+#doc-nav-mobile > div {
+  background-color: #2d3348;
+  z-index: 100;
+  border-radius: 0 0 0.5rem 0.5rem;
+  height: 55vh;
+  overflow-y: auto;
+}
+
+#doc-nav-mobile button {
+  width: 100%;
+  background-color: #105fb0;
+  color: #fff;
+  border-color: #105fb0;
+  border-radius: 0.5rem 0.5rem 0 0;
+}
+
+@media (max-width: 992px) {
+
+  .hide-on-mobile {
+    display: none;
+  }
+
+  .doc-content {
+    width: 100%;
+  }
+
+  .endpoint-container .section-header {
+    margin: 40px 0 70px 0;
+  }
+
+  .endpoint-container .section-header span {
+    float: none;
+    position: absolute;
+    top: unset;
+    left: 0;
+    bottom: -50px;
+  }
+
+  .endpoint-container:before {
+    height: 30px;
+    margin-top: -12px;
+  }
+
+}
+
+@media (min-width: 992px) {
+  .hide-on-desktop {
+    display: none;
+  }
 }

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

@@ -1,4 +1,4 @@
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core';
 import { Env, StateService } from 'src/app/services/state.service';
 import { Observable, merge, of } from 'rxjs';
 import { SeoService } from 'src/app/services/seo.service';
@@ -17,12 +17,26 @@ export class ApiDocsComponent implements OnInit {
   code: any;
   baseNetworkUrl = '';
   @Input() restTabActivated: Boolean;
+  @ViewChild( "mobileFixedApiNav", { static: false } ) mobileFixedApiNav: ElementRef;
+  desktopDocsNavPosition = "relative";
+  showFloatingDocsNav = false;
+  mobileMenuOpen = true;
 
   constructor(
     private stateService: StateService,
     private seoService: SeoService,
   ) { }
 
+  ngAfterViewInit() {
+    const that = this;
+    setTimeout( () => {
+      window.addEventListener('scroll', function() {
+        that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
+        that.showFloatingDocsNav = ( window.pageYOffset > ( that.mobileFixedApiNav.nativeElement.offsetHeight + 188 ) ) ? true : false;
+      });
+    }, 1 );
+  }
+
   ngOnInit(): void {
     this.env = this.stateService.env;
     this.seoService.setTitle($localize`:@@e351b40b3869a5c7d19c3d4918cb1ac7aaab95c4:API`);

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

@@ -27,5 +27,13 @@
 
     <div id="main-tab-content" [ngbNavOutlet]="nav" class="mt-2"></div>
 
+    <br>
+
+    <div id="footer" class="text-center">
+      <a [routerLink]="['/terms-of-service']" i18n="shared.terms-of-service|Terms of Service">Terms of Service</a>
+      |
+      <a [routerLink]="['/privacy-policy']" i18n="shared.privacy-policy|Privacy Policy">Privacy Policy</a>
+    </div>
+
   </div>
 </div>

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

@@ -1,4 +1,9 @@
 #main-tab-content {
   text-align: left;
   padding-top: 10px;
+  scroll-behavior: smooth;
+}
+
+#footer {
+  clear: both;
 }