49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
|
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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|