Make desktop docs-nav sticky on scroll

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

@@ -3,8 +3,8 @@
 
     <div id="restAPI" *ngIf="restTabActivated">
 
-      <div class="doc-nav-desktop">
-        <p>Placeholder.</p>
+      <div class="doc-nav-desktop" [ngClass]="docsNavPosition">
+        Placeholder.
       </div>
 
       <div class="doc-content">

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

@@ -74,9 +74,18 @@ li.nav-item {
 
 .doc-nav-desktop {
   width: 25%;
+}
+
+.doc-nav-desktop.relative {
   float: left;
 }
 
+.doc-nav-desktop.fixed {
+  float: unset;
+  position: fixed;
+  top: 20px;
+}
+
 .doc-content {
   width: 75%;
   float: right;

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

@@ -17,6 +17,7 @@ export class ApiDocsComponent implements OnInit {
   code: any;
   baseNetworkUrl = '';
   @Input() restTabActivated: Boolean;
+  docsNavPosition = "relative";
 
   constructor(
     private stateService: StateService,
@@ -35,6 +36,16 @@ export class ApiDocsComponent implements OnInit {
       })
     );
 
+    //to toggle fixed menu for desktop navigation
+    let that = this;
+    window.addEventListener('scroll', function() {
+      if( window.pageYOffset > 182 ) {
+        that.docsNavPosition = "fixed";
+      } else {
+        that.docsNavPosition = "relative";
+      }
+    });
+
     if (document.location.port !== '') {
       this.hostname = `${this.hostname}:${document.location.port}`;
     }