<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>
	<div id="sidebar">
		<MobileSidebar v-if="windowWidth < 768" />
		<DesktopSidebar v-if="windowWidth > 768" :minimized="windowWidth < 1300" />
	</div>
</template>

<style>
#sidebar {
	z-index: 999;
}
</style>
