hajeebtok-frontend/src/components/Sidebar.vue

<script>
import { defineComponent } from 'vue'
import DesktopSidebar from '@/components/DesktopSidebar.vue'
import MobileSidebar from '@/components/MobileSidebar.vue'

export default defineComponent({
    name: 'Sidebar',
    components: { DesktopSidebar, MobileSidebar },
    data() {
        return {
            windowWidth: window.innerWidth,
        }
    },
    created() {
        window.addEventListener('resize', this.handleResize)
    },
    unmounted() {
        window.removeEventListener('resize', this.handleResize)
    },
    methods: {
        handleResize() {
            this.windowWidth = window.innerWidth
        },
    },
})
</script>

<template>
    <MobileSidebar v-if="windowWidth < 768" />
    <DesktopSidebar v-if="windowWidth > 768" :minimized="windowWidth < 1300" />
</template>