diff --git a/apps/front/src/helper/mediaQuerry.ts b/apps/front/src/helper/mediaQuerry.ts new file mode 100644 index 0000000..32aed0e --- /dev/null +++ b/apps/front/src/helper/mediaQuerry.ts @@ -0,0 +1,20 @@ +import { computed, onMounted, onUnmounted, ref } from 'vue'; + +export const useBreakpoints = () => { + const windowWidth = ref(window.innerWidth); + + const onWidthChange = () => (windowWidth.value = window.innerWidth); + onMounted(() => window.addEventListener('resize', onWidthChange)); + onUnmounted(() => window.removeEventListener('resize', onWidthChange)); + + const type = computed(() => { + if (windowWidth.value < 680) return 'xs'; + if (windowWidth.value >= 680 && windowWidth.value < 1200) return 'md'; + if (windowWidth.value >= 1200) return 'lg'; + return null; // This is an unreachable line, simply to keep eslint happy. + }); + + const width = computed(() => windowWidth.value); + + return { width, type }; +}; diff --git a/apps/front/src/views/HomeView.vue b/apps/front/src/views/HomeView.vue index ba0d5c6..1e21b59 100644 --- a/apps/front/src/views/HomeView.vue +++ b/apps/front/src/views/HomeView.vue @@ -2,7 +2,9 @@ import { useIndexStore } from '../stores'; import { getMediaApiUrl } from '../helper/index'; import IcoOrMedia from '../component/helper/IcoOrMedia.vue'; +import { useBreakpoints } from '../helper/mediaQuerry'; const indexStore = useIndexStore(); +const { type } = useBreakpoints();