[WIP] Hide calendar filter on scroll down

app/src/plugins/tm@dashboard/tasks/tasks.vue

@@ -1,6 +1,6 @@
 <template>
-	<div>
+	<div ref="page">
-		<A-task-filter v-if="$store.getters['tm/isInitialized']" :split-days="timelineData ? splitDays : null" @filter-changed="onFilterChanged" />
+		<A-task-filter v-if="$store.getters['tm/isInitialized']" :split-days="timelineData ? splitDays : null" @filter-changed="onFilterChanged" :style="{marginTop: headerMarginTop}" ref="filter" />
 		<Z-timeline v-if="timelineData" :calData="timelineData" :calConfig="config" :splits="splitDays" />
 	</div>
 </template>
@@ -23,6 +23,8 @@ export default {
 		return {
 			filter: null,
 			subtasks: null,
+			headerMarginTop: '0px',
+			previousScrollTop: 0,
 			config: {
 				date: subDays(new Date(), 1),
 				scrollHour: 7,
@@ -145,6 +147,11 @@ export default {
 		this.$events.on('on-blocker-deleted', () => {
 			this.onFilterChanged(this.filter)
 		})
+
+		setTimeout(() => {
+			this.$refs.page?.querySelector('.vuecal__bg')?.addEventListener('scroll', this.handleScroll)
+		}, 1000)
+		// window
 	},
 
 	unmounted() {
@@ -152,6 +159,8 @@ export default {
 		this.$events.off('on-subtask-deleted')
 		this.$events.off('on-blocker-edited')
 		this.$events.off('on-blocker-deleted')
+
+		this.$refs.page?.querySelector('.vuecal__bg')?.removeEventListener('scroll', this.handleScroll)
 	},
 
 	methods: {
@@ -173,6 +182,17 @@ export default {
 			} catch (error) {
 				this.$toast.error('Nepodarilo sa nacitat data!')
 			}
+		},
+
+		handleScroll(e) {
+			if (this.previousScrollTop > e.target.scrollTop)
+				this.headerMarginTop = '0px'
+			else
+				this.headerMarginTop = `-${this.$refs.filter.$el.offsetHeight}px`
+
+			console.log(this.headerMarginTop)
+
+			this.previousScrollTop = e.target.scrollTop
 		}
 	}
 }