From ed01151b27091765569f9eef577d94be25e02489 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@di.uoa.gr>
Date: Wed, 16 Mar 2022 15:10:35 +0200
Subject: [PATCH] Syncronize page content sticky with navbar

---
 .../page-content/page-content.component.ts    | 27 +++++++------------
 sharedComponents/navigationBar.component.html |  2 +-
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts
index 65007b23..894fdedc 100644
--- a/dashboard/sharedComponents/page-content/page-content.component.ts
+++ b/dashboard/sharedComponents/page-content/page-content.component.ts
@@ -8,8 +8,8 @@ declare var UIkit;
   template: `
     <div id="page_content">
       <div id="header">
-        <div #header id="page_content_header" uk-sticky="top: #header; media: @m" [attr.offset]="offset">
-          <div class="uk-container uk-container-large uk-padding-remove-vertical">
+        <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
+          <div #header class="uk-container uk-container-large uk-padding-remove-vertical">
             <ng-content select="[header]"></ng-content>
           </div>
         </div>
@@ -32,29 +32,22 @@ export class PageContentComponent implements OnInit, OnDestroy {
   constructor() {
   }
   
-  @HostListener('window:scroll', ['$event.target']) // for window scroll events
-  scroll(e) {
-    let scroll = window.pageYOffset;
-    let previous = this.offset;
-    if (scroll > this.current) {
-      this.offset = 0;
-    } else {
-      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
-    }
-    if (this.offset !== previous) {
-      this.initSticky();
-    }
-    this.current = scroll;
-  }
-  
   ngOnInit() {
     if (typeof window !== "undefined") {
       this.current = window.pageYOffset;
+      this.initSticky();
     }
   }
   
   initSticky() {
     this.clear();
+    this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
+      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
+  
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
+      this.offset = 0;
+    }));
     this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
       this.sticky = true;
       this.stickyEmitter.emit(this.sticky);
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html
index 6d9f1993..7995998e 100644
--- a/sharedComponents/navigationBar.component.html
+++ b/sharedComponents/navigationBar.component.html
@@ -93,7 +93,7 @@
     </div>
   </div>
   <div id="main-menu" class="uk-visible@m">
-    <div class="uk-navbar-container" [ngClass]="portal + '-menu'"
+    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
          uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
          [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
       <div