Add body class when dashboard is scrolled

Signed-off-by: Julius Härtl <jus@bitgrid.net>

diff --git a/apps/dashboard/src/App.vue b/apps/dashboard/src/App.vue
index 7c4e51d70c7b77a14250c245770c1e1fef9493d7..e7668468a5036369780fe66f0408a3e684bcaca7 100644 (file)
--- a/apps/dashboard/src/App.vue
+++ b/apps/dashboard/src/App.vue
@@ -235,6 +235,7 @@ export default {
        },
        mounted() {
                this.updateGlobalStyles()
+               window.addEventListener('scroll', this.handleScroll)
 
                setInterval(() => {
                        this.timer = new Date()
@@ -244,6 +245,9 @@ export default {
                        window.addEventListener('scroll', this.disableFirstrunHint)
                }
        },
+       destroyed() {
+               window.removeEventListener('scroll', this.handleScroll)
+       },
        methods: {
                /**
                 * Method to register panels that will be called by the integrating apps
@@ -361,6 +365,13 @@ export default {
                        }
                        this.saveStatuses()
                },
+               handleScroll() {
+                       if (window.scrollY > 50) {
+                               document.body.classList.add('dashboard--scrolled')
+                       } else {
+                               document.body.classList.remove('dashboard--scrolled')
+                       }
+               },
        },
 }
 </script>