Add a workaround for sticky update bug on sidebar toggle

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -2,14 +2,15 @@ import {
   AfterViewInit,
   ChangeDetectorRef,
   Component,
-  ElementRef, Inject,
+  ElementRef,
+  Inject,
   Input,
   OnDestroy,
-  OnInit, PLATFORM_ID,
+  OnInit,
+  PLATFORM_ID,
   ViewChild
 } from "@angular/core";
 import {LayoutService} from "../sidebar/layout.service";
-import {Subscription} from "rxjs";
 
 declare var UIkit;
 declare var ResizeObserver;
@@ -18,8 +19,8 @@ declare var ResizeObserver;
   selector: '[page-content]',
   template: `
     <div id="page_content">
-      <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer class="uk-tile-default uk-blur-background"
+      <div [class.uk-hidden]="!isBrowser" id="page_content_sticky_footer" #sticky_footer
-           [attr.uk-sticky]="'bottom: true'" [attr.offset]="footer_offset">
+           class="uk-tile-default uk-blur-background">
         <div class="uk-container uk-container-large">
           <div class="uk-padding-small uk-padding-remove-vertical">
             <ng-content select="[sticky_footer]"></ng-content>
@@ -27,7 +28,6 @@ declare var ResizeObserver;
         </div>
       </div>
       <div id="page_content_header" #header class="uk-blur-background"
-           [attr.uk-sticky]="(headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset"
            [attr.style]="'margin-top: '+(footer_height? '-'+footer_height+'px': '0')">
         <div class="uk-container uk-container-large">
           <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
@@ -37,8 +37,7 @@ declare var ResizeObserver;
           </div>
         </div>
       </div>
-      <div id="page_content_actions" #actions class="uk-blur-background"
+      <div id="page_content_actions" #actions class="uk-blur-background">
-           [attr.uk-sticky]="(!headerSticky && shouldSticky)?'media: @m':null" [attr.offset]="offset">
         <div class="uk-container uk-container-large">
           <div class="uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
             <div class="actions">
@@ -69,9 +68,12 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   public shouldSticky: boolean = true;
   @ViewChild('header') header: ElementRef;
   @ViewChild('actions') actions: ElementRef;
-  public footer_offset: number = 0;
   public footer_height: number = 0;
-  @ViewChild("sticky_footer") sticky_footer;
+  @ViewChild("sticky_footer") sticky_footer: ElementRef;
+  private sticky = {
+    header: null,
+    footer: null
+  }
   subscriptions = [];
 
   constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef,
@@ -81,6 +83,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   ngOnInit() {
     if (typeof document !== "undefined") {
       this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height'));
+      this.stickyBugWorkaround();
     }
   }
 
@@ -89,20 +92,22 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   get isStickyActive() {
-    if (this.header && this.actions && this.shouldSticky) {
+    return this.sticky.header?.isActive;
-      let sticky = this.headerSticky ? this.header.nativeElement : this.actions.nativeElement;
-      return UIkit.sticky(sticky).isActive;
-    } else {
-      return false;
-    }
   }
 
   ngAfterViewInit() {
     if (typeof document !== "undefined") {
-      // TODO make it smooth
-      // this.observeBottom();
-      this.observeHeader();
       this.observeStickyFooter();
+      if (this.shouldSticky && typeof document !== 'undefined') {
+        this.sticky.header = UIkit.sticky((this.headerSticky ? this.header.nativeElement : this.actions.nativeElement), {
+          media: '@m',
+          offset: this.offset
+        });
+      }
+      if (this.sticky_footer) {
+        let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
+        this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {bottom: true, offset: footer_offset});
+      }
     }
   }
 
@@ -114,12 +119,47 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
     });
   }
 
-  ngAfterContentChecked() {
+
-    if (this.sticky_footer && typeof document !== 'undefined') {
+  /**
-      this.footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
+   * Workaround for sticky not update bug when sidebar is toggled.
+   * TODO when UIKit will be updated => remove
+   *
+   * */
+  stickyBugWorkaround() {
+    let sidebarOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-width')) -
+      Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-mini-width'));
+    let transitionDelay = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-transition-delay')) * 1000;
+    this.subscriptions.push(this.layoutService.isOpen.subscribe(isOpen => {
+      if (this.sticky.header) {
+        if (isOpen) {
+          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) - sidebarOffset + 'px';
+        } else {
+          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) + sidebarOffset + 'px';
         }
+        setTimeout(() => {
+          this.sticky.header.$emit();
+        }, transitionDelay);
+      }
+      if (this.sticky.footer) {
+        if (isOpen) {
+          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) - sidebarOffset + 'px';
+        } else {
+          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) + sidebarOffset + 'px';
+        }
+        setTimeout(() => {
+          this.sticky.footer.$emit();
+        }, transitionDelay);
+      }
+      this.cdr.detectChanges();
+    }));
   }
 
+  /**
+   * @deprecated
+   *
+   * Should be smooth
+   *
+   * */
   private observeBottom() {
     let bottom = document.getElementById('bottom');
     if (bottom) {
@@ -133,6 +173,9 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
     }
   }
 
+  /**
+   * @deprecated
+   * */
   private observeHeader() {
     if (this.header) {
       let headerObs = new IntersectionObserver(entries => {
@@ -152,7 +195,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
       let resizeObs = new ResizeObserver(entries => {
         entries.forEach(entry => {
           setTimeout(() => {
-            this.footer_offset = this.calcStickyFooterOffset(entry.target);
+            this.sticky.footer.offset = this.calcStickyFooterOffset(entry.target);
             this.cdr.detectChanges();
           });
         })

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -161,6 +161,10 @@ export class LayoutService {
     this.setObserver();
   }
 
+  get isOpen(): Observable<boolean> {
+    return this.openSubject.asObservable();
+  }
+
   get open(): boolean {
     return this.openSubject.getValue();
   }

dashboard/sharedComponents/sidebar/sidebar-content.component.ts

@@ -1,4 +1,4 @@
-import {Component, HostListener} from "@angular/core";
+import {Component} from "@angular/core";
 import {LayoutService} from "./layout.service";
 
 @Component({