iopProject

src/hooks/useResize.ts

@@ -0,0 +1,48 @@
+import { watch, onMounted, onBeforeMount, onBeforeUnmount } from "vue";
+import { useRoute } from "vue-router";
+import { useAppStore } from "@/stores/app";
+
+const { body } = document;
+const WIDTH = 992; // refer to Bootstrap's responsive design
+
+export function useResize() {
+  const route = useRoute();
+  const appStore = useAppStore();
+
+  watch(route, () => {
+    if (appStore.device === "mobile" && appStore.sidebar.opened) {
+      appStore.closeSidebar(false);
+    }
+  });
+
+  const isMobile = () => {
+    const rect = body.getBoundingClientRect();
+    return rect.width - 1 < WIDTH;
+  };
+
+  const resizeHandler = () => {
+    if (!document.hidden) {
+      const mobile = isMobile();
+      appStore.toggleDevice(mobile ? "mobile" : "desktop");
+      if (mobile) {
+        appStore.closeSidebar(true);
+      }
+    }
+  };
+
+  onBeforeMount(() => {
+    window.addEventListener("resize", resizeHandler);
+  });
+
+  onBeforeUnmount(() => {
+    window.removeEventListener("resize", resizeHandler);
+  });
+
+  onMounted(() => {
+    const mobile = isMobile();
+    if (mobile) {
+      appStore.toggleDevice("mobile");
+      appStore.closeSidebar(true);
+    }
+  });
+}