From d5742af12c9d434f953d0b5214de3204c33997b8 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Tue, 21 Nov 2023 20:28:29 +0300
Subject: [PATCH] Refactor #4821

---
 components/lib/dock/Dock.vue | 32 +++++++++++++++++++++++++++-----
 1 file changed, 27 insertions(+), 5 deletions(-)

diff --git a/components/lib/dock/Dock.vue b/components/lib/dock/Dock.vue
index 02559cb1f..c9a6d40fc 100644
--- a/components/lib/dock/Dock.vue
+++ b/components/lib/dock/Dock.vue
@@ -11,19 +11,41 @@ import DockSub from './DockSub.vue';
 export default {
     name: 'Dock',
     extends: BaseDock,
+    matchMediaListener: null,
     data() {
         return {
+            query: null,
             queryMatches: false
         };
     },
     mounted() {
-        const query = matchMedia(`(max-width: ${this.breakpoint})`);
+        this.bindMatchMediaListener();
+    },
+    beforeUnmount() {
+        this.unbindMatchMediaListener();
+    },
+    methods: {
+        bindMatchMediaListener() {
+            if (!this.matchMediaListener) {
+                const query = matchMedia(`(max-width: ${this.breakpoint})`);
 
-        this.queryMatches = query.matches;
+                this.query = query;
+                this.queryMatches = query.matches;
 
-        query.addEventListener('change', () => {
-            this.queryMatches = query.matches;
-        });
+                this.matchMediaListener = () => {
+                    this.queryMatches = query.matches;
+                    this.mobileActive = false;
+                };
+
+                this.query.addEventListener('change', this.matchMediaListener);
+            }
+        },
+        unbindMatchMediaListener() {
+            if (this.matchMediaListener) {
+                this.query.removeEventListener('change', this.matchMediaListener);
+                this.matchMediaListener = null;
+            }
+        }
     },
     computed: {
         containerClass() {