From 3ae46e6ba18790fe20b75dbcbf3f16d6e9fbc479 Mon Sep 17 00:00:00 2001 From: hunicus <93150691+hunicus@users.noreply.github.com> Date: Wed, 15 Dec 2021 21:31:00 -0500 Subject: [PATCH] Make desktop docs-nav sticky on scroll --- .../src/app/components/docs/api-docs.component.html | 4 ++-- .../src/app/components/docs/api-docs.component.scss | 9 +++++++++ .../src/app/components/docs/api-docs.component.ts | 11 +++++++++++ 3 files changed, 22 insertions(+), 2 deletions(-) diff --git a/frontend/src/app/components/docs/api-docs.component.html b/frontend/src/app/components/docs/api-docs.component.html index a09705b47..6fe7110ae 100644 --- a/frontend/src/app/components/docs/api-docs.component.html +++ b/frontend/src/app/components/docs/api-docs.component.html @@ -3,8 +3,8 @@
-
-

Placeholder.

+
+ Placeholder.
diff --git a/frontend/src/app/components/docs/api-docs.component.scss b/frontend/src/app/components/docs/api-docs.component.scss index 077bc3dc2..8049ef9aa 100644 --- a/frontend/src/app/components/docs/api-docs.component.scss +++ b/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; diff --git a/frontend/src/app/components/docs/api-docs.component.ts b/frontend/src/app/components/docs/api-docs.component.ts index a38ded836..724ecdc3f 100644 --- a/frontend/src/app/components/docs/api-docs.component.ts +++ b/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}`; }