Add hasStickyHeaderOnMobile in layoutService

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -79,6 +79,10 @@ export class LayoutService {
    *  Add hasMenuSearchBar: false/ nothing on data of route config, if the search bar in the menu should not appear, otherwise true.
    */
   private hasMenuSearchBarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  /**
+   * Add hasStickyHeaderOnMobile: true in order to activate uk-sticky in header of mobile/tablet devices.
+   * */
+  private hasStickyHeaderOnMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   private subscriptions: any[] = [];
 
@@ -177,6 +181,12 @@ export class LayoutService {
         } else {
           this.setHasMenuSearchBar(false);
         }
+        if (data['hasStickyHeaderOnMobile'] !== undefined &&
+            data['hasStickyHeaderOnMobile'] === true) {
+          this.setHasStickyHeaderOnMobile(true);
+        } else {
+          this.setHasStickyHeaderOnMobile(false);
+        }
       }
     }));
     this.setObserver();
@@ -311,4 +321,12 @@ export class LayoutService {
   setHasMenuSearchBar(value: boolean) {
     this.hasMenuSearchBarSubject.next(value);
   }
+
+  get hasStickyHeaderOnMobile(): Observable<boolean> {
+    return this.hasStickyHeaderOnMobileSubject.asObservable();
+  }
+
+  setHasStickyHeaderOnMobile(value: boolean) {
+    this.hasStickyHeaderOnMobileSubject.next(value);
+  }
 }

sharedComponents/navigationBar.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="showMenu && activeHeader">
-  <div id="main-menu-small" class="uk-hidden@m">
+  <div id="main-menu-small" class="uk-hidden@m" [attr.uk-sticky]="hasStickyHeaderOnMobile?'':null">
     <nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400">
         <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left" [class.uk-light]='activeHeader.darkBg'>
           <a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle>

sharedComponents/navigationBar.component.ts

@@ -63,6 +63,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
   @Input() showLogo: boolean = true;
   @Input() notificationConfiguration: NotificationConfiguration;
   replaceHeader: boolean = false;
+  hasStickyHeaderOnMobile: boolean = false;
   public activeHeader: Header;
   keyword: string = '';
   public isAuthorized: boolean = false;
@@ -100,6 +101,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
       this.searchMode = false;
       this.keyword = "";
     }));
+    this.subs.push(this.layoutService.hasStickyHeaderOnMobile.subscribe(hasStickyHeaderOnMobile => {
+      console.log(hasStickyHeaderOnMobile);
+      this.hasStickyHeaderOnMobile = hasStickyHeaderOnMobile;
+    }))
     this.initialize();
   }