Add skeleton for mobile docs nav

frontend/src/app/app.module.ts

@@ -47,7 +47,7 @@ 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 { CodeTemplateComponent } from './components/docs/code-template.component';
@@ -58,6 +58,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: [
@@ -109,6 +110,7 @@ import { PushTransactionComponent } from './components/push-transaction/push-tra
     BrowserAnimationsModule,
     InfiniteScrollModule,
     NgbTypeaheadModule,
+    NgbModule,
     FontAwesomeModule,
     SharedModule,
     NgxEchartsModule.forRoot({
@@ -159,5 +161,6 @@ export class AppModule {
     library.addIcons(faAngleRight);
     library.addIcons(faAngleLeft);
     library.addIcons(faBook);
+    library.addIcons(faListUl);
   }
 }

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

@@ -3,7 +3,7 @@
 
     <div id="restAPI" *ngIf="restTabActivated">
 
-      <div class="doc-nav-desktop" [ngClass]="docsNavPosition">
+      <div class="doc-nav-desktop hide-on-mobile" [ngClass]="desktopDocsNavPosition">
 
         <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>
@@ -73,7 +73,18 @@
 
       <div class="doc-content">
 
-        <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>
+        <p class="hide-on-mobile">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 class="doc-nav-mobile hide-on-desktop" [ngClass]="mobileDocsNavPosition">
+          <button id="doc-nav-mobile-toggle" type="button" class="btn btn-outline-primary" [ngClass]="mobileDocsNavPosition" (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">
+                <p>Placeholder.</p>
+              </div>
+            </div>
+          </div>
+        </div>
 
         <div class="api-category" *ngIf="network.val !== 'bisq' && network.val !== 'liquid'">
 

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

@@ -163,10 +163,38 @@ li.nav-item {
   float: right;
 }
 
-@media (max-width: 992px){
+.doc-nav-mobile.relative {
-  .doc-nav-desktop {
+
+}
+
+.doc-nav-mobile.relative {
+  position: relative;
+}
+
+.doc-nav-mobile.fixed {
+  position: fixed;
+  top: 20px;
+  width: calc(100% - 60px);
+  z-index: 100;
+}
+
+.doc-nav-mobile > div {
+  background-color: #2d3348;
+  z-index: 100;
+  border-radius: 0.25rem;
+}
+
+#doc-nav-mobile-toggle {
+  width: 100%;
+  background-color: #105fb0;
+  color: #fff;
+  border-color: #105fb0;
+}
+
+@media (max-width: 992px) {
+
+  .hide-on-mobile {
     display: none;
-    height: auto;
   }
 
   .doc-content {
@@ -186,3 +214,8 @@ li.nav-item {
   }
 }
 
+@media (min-width: 992px) {
+  .hide-on-desktop {
+    display: none;
+  }
+}

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

@@ -17,7 +17,9 @@ export class ApiDocsComponent implements OnInit {
   code: any;
   baseNetworkUrl = '';
   @Input() restTabActivated: Boolean;
-  docsNavPosition = "relative";
+  desktopDocsNavPosition = "relative";
+  mobileDocsNavPosition = "relative";
+  mobileMenuOpen = true;
 
   constructor(
     private stateService: StateService,
@@ -39,11 +41,8 @@ export class ApiDocsComponent implements OnInit {
     //to toggle fixed menu for desktop navigation
     let that = this;
     window.addEventListener('scroll', function() {
-      if( window.pageYOffset > 182 ) {
+      that.desktopDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
-        that.docsNavPosition = "fixed";
+      that.mobileDocsNavPosition = ( window.pageYOffset > 182 ) ? "fixed" : "relative";
-      } else {
-        that.docsNavPosition = "relative";
-      }
     });
 
     if (document.location.port !== '') {