Add isMobile in layoutService

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -2,12 +2,15 @@ import {Injectable} from "@angular/core";
 import {BehaviorSubject, Observable, Subscriber} from "rxjs";
 import {ActivationStart, Router} from "@angular/router";
 
+declare var ResizeObserver;
+
 @Injectable({
   providedIn: 'root'
 })
 export class LayoutService {
   
   public static HEADER_HEIGHT = '65px';
+  private deviceBreakpoint: number;
   
   /**
    * Set this to true when sidebar items are ready.
@@ -55,21 +58,42 @@ export class LayoutService {
    *  Be sure that replaceHeader exists.
    */
   private replaceHeaderSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
-  private observer: IntersectionObserver;
-  sub: any;
+  /** Check if the current device is mobile or tablet */
+  private isMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  private subscriptions: any[] = [];
   
   ngOnDestroy() {
     this.clearSubscriptions();
   }
   
   clearSubscriptions() {
-    if (this.sub instanceof Subscriber) {
-      this.sub.unsubscribe();
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscriber) {
+        subscription.unsubscribe();
+      } else if(subscription instanceof ResizeObserver) {
+        subscription.disconnect();
+      }
+    })
+  }
+  
+  setObserver() {
+    if(typeof ResizeObserver !== "undefined" && typeof document !== "undefined") {
+      this.deviceBreakpoint = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--uk-breakpoint-m').replace('px', '')) + 1;
+      let resizeObs = new ResizeObserver(entries => {
+        entries.forEach(entry => {
+          this.isMobileSubject.next(entry.target.clientWidth < this.deviceBreakpoint);
+        })
+      });
+      this.subscriptions.push(resizeObs);
+      resizeObs.observe(document.documentElement);
     }
   }
   
   constructor(private router: Router) {
-    this.sub = this.router.events.subscribe(event => {
+    if(typeof window !== 'undefined') {
+      this.isMobileSubject.next(window.innerWidth < this.deviceBreakpoint);
+    }
+    this.subscriptions.push(this.router.events.subscribe(event => {
       if (event instanceof ActivationStart) {
         this.setReplaceHeader(false);
         let data = event.snapshot.data;
@@ -128,7 +152,8 @@ export class LayoutService {
           this.setActiveMenuItem('');
         }
       }
-    });
+    }));
+    this.setObserver();
   }
   
   get open(): boolean {
@@ -210,4 +235,8 @@ export class LayoutService {
   setActiveMenuItem(value: string) {
     this.activeMenuItemSubject.next(value);
   }
+  
+  get isMobile(): Observable<boolean> {
+    return this.isMobileSubject.asObservable();
+  }
 }