fix: body scroll adjustment on sidebar toggle (#195)

Co-authored-by: audi pratama <Audi.Priyatna@prolind-group.net>

src/assets/js/components/sidebar.js

@@ -1,3 +1,5 @@
+import isDesktop from '../helper/isDesktop'
+
 function slideToggle(a, b, c) { 0 === a.clientHeight ? j(a, b, c, !0) : j(a, b, c) } function slideUp(a, b, c) { j(a, b, c) } function slideDown(a, b, c) { j(a, b, c, !0) } function j(c, a, k, d) { void 0 === a && (a = 400), void 0 === d && (d = !1), c.style.overflow = "hidden", d && (c.style.display = "block"); var l, b = window.getComputedStyle(c), e = parseFloat(b.getPropertyValue("height")), f = parseFloat(b.getPropertyValue("padding-top")), g = parseFloat(b.getPropertyValue("padding-bottom")), h = parseFloat(b.getPropertyValue("margin-top")), i = parseFloat(b.getPropertyValue("margin-bottom")), m = e / a, n = f / a, o = g / a, p = h / a, q = i / a; window.requestAnimationFrame(function s(r) { void 0 === l && (l = r); var b = r - l; d ? (c.style.height = m * b + "px", c.style.paddingTop = n * b + "px", c.style.paddingBottom = o * b + "px", c.style.marginTop = p * b + "px", c.style.marginBottom = q * b + "px") : (c.style.height = e - m * b + "px", c.style.paddingTop = f - n * b + "px", c.style.paddingBottom = g - o * b + "px", c.style.marginTop = h - p * b + "px", c.style.marginBottom = i - q * b + "px"), b >= a ? (c.style.height = "", c.style.paddingTop = "", c.style.paddingBottom = "", c.style.marginTop = "", c.style.marginBottom = "", c.style.overflow = "", d || (c.style.display = "none"), "function" == typeof k && k()) : window.requestAnimationFrame(s) }) }
 
 /**
@@ -69,8 +71,7 @@ class Sidebar {
    * On First Load
    */
   onFirstLoad() {
-    var w = window.innerWidth
-    if (w < 1200) {
+    if (!isDesktop(window)) {
       this.sidebarEL.classList.remove("active")
     }
   }
@@ -79,11 +80,10 @@ class Sidebar {
    * On Sidebar Rezise Event
    */
   onResize() {
-    var w = window.innerWidth
-    if (w < 1200) {
-      this.sidebarEL.classList.remove("active")
-    } else {
+    if (isDesktop(window)) {
       this.sidebarEL.classList.add("active")
+    } else {
+      this.sidebarEL.classList.remove("active")
     }
 
     // reset
@@ -125,7 +125,7 @@ class Sidebar {
    * Create Sidebar Backdrop
    */
   createBackdrop() {
-    if (window.innerWidth > 1200) return
+    if (isDesktop(window)) return
     this.deleteBackdrop()
     const backdrop = document.createElement("div")
     backdrop.classList.add("sidebar-backdrop")
@@ -147,6 +147,7 @@ class Sidebar {
    * Toggle Overflow Body
    */
   toggleOverflowBody(active) {
+    if(isDesktop(window)) return;
     const sidebarState = this.sidebarEL.classList.contains("active")
     const body = document.querySelector("body")
     if (typeof active == "undefined") {

src/assets/js/helper/isDesktop.js

@@ -0,0 +1 @@
+export default (window) => window.innerWidth > 1200;