responsive.js

import Vue from 'vue';
import getScrollbarWidth from "@modules/utils/getScrollbarWidth.js";
import { getDocument, getWindow } from "@modules/utils/dom.js";

const window = getWindow();
const document = getDocument();

const mobileWidth = parseInt(
  window
    .getComputedStyle(document.documentElement)
    .getPropertyValue('--screen-mobile')
) - 1;

function getCurrentWidth() {
  return document.body.clientWidth;
}

function getScreenHeight() {
  return window.innerHeight;
}

export const responsive = Vue.observable({
  width: getCurrentWidth(),
  screenHeight: getScreenHeight(),
  get isMobile() {
    return this.width + getScrollbarWidth() <= mobileWidth;
  },
  mobileWidth,
});

window.addEventListener('resize', (event) => {
  responsive.width = getCurrentWidth();
  responsive.screenHeight = getScreenHeight();
});

const install = Vue => {
  Vue.mixin({
    provide: {
      responsive,
    }
  });
};

export default { install };