From 9511b079ffdf51207c0625b00ac5a39595fe51e4 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 19 Feb 2025 18:10:57 +0300
Subject: [PATCH] Hide theme menu on scroll
---
.../designer/dashboard/DesignDashboard.vue | 27 ++++++++++++++++++-
1 file changed, 26 insertions(+), 1 deletion(-)
diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
index 53df23f21..bfe5d9f86 100644
--- a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
+++ b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -80,7 +80,7 @@
</button>
</div>
</template>
- <Menu ref="themeMenu" :model="themeOptions" :popup="true" />
+ <Menu ref="themeMenu" :model="themeOptions" :popup="true" @show="onMenuShow" @hide="onMenuHide" />
</div>
</template>
@@ -89,6 +89,7 @@ import { usePreset } from '@primeuix/themes';
import Aura from '@primeuix/themes/aura';
export default {
+ scrollListener: null,
setup() {
const runtimeConfig = useRuntimeConfig();
@@ -97,6 +98,9 @@ export default {
};
},
inject: ['designerService'],
+ beforeUnmount() {
+ this.unbindScrollListener();
+ },
data() {
return {
licenseKey: null,
@@ -311,6 +315,27 @@ export default {
this.currentTheme = theme;
this.$refs.themeMenu.toggle(event);
},
+ onMenuShow() {
+ this.bindScrollListener();
+ },
+ onMenuHide() {
+ this.unbindScrollListener();
+ },
+ bindScrollListener() {
+ if (!this.scrollListener) {
+ this.scrollListener = () => {
+ this.$refs.themeMenu.hide();
+ };
+
+ window.addEventListener('scroll', this.scrollListener);
+ }
+ },
+ unbindScrollListener() {
+ if (this.scrollListener) {
+ window.removeEventListener('scroll', this.scrollListener);
+ this.scrollListener = null;
+ }
+ },
abbrThemeName(theme) {
return theme.t_name ? theme.t_name.substring(0, 2) : 'UT';
}