From 94a4218556472cfb455198241200fa576ea606dc Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Fri, 27 Aug 2021 12:35:57 +0300
Subject: [PATCH] Fixed #1398 - Make Dock component mobile friendly

---
 src/components/dock/Dock.vue    |  8 +++++--
 src/components/dock/DockSub.vue | 42 +++++++++++++++++----------------
 2 files changed, 28 insertions(+), 22 deletions(-)

diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index e1f01b675..1c55289fb 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -68,6 +68,11 @@ export default {
     pointer-events: none;
 }
 
+.p-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+}
+
 .p-dock-list {
     margin: 0;
     padding: 0;
@@ -75,7 +80,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: center;
-    pointer-events: auto;
 }
 
 .p-dock-item {
@@ -160,4 +164,4 @@ export default {
 .p-dock-left .p-dock-list {
     flex-direction: column;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index 17a751fbd..4071b0403 100644
--- a/src/components/dock/DockSub.vue
+++ b/src/components/dock/DockSub.vue
@@ -1,27 +1,29 @@
 <template>
-    <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
-        <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
-            <template v-if="!template">
-                <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
-                    <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target" 
-                        :data-pr-tooltip="item.label" @click="onItemClick(e, item)">
+    <div class="p-dock-list-container">
+        <ul ref="list" class="p-dock-list" role="menu" @mouseleave="onListMouseLeave">
+            <li v-for="(item, index) of model" :class="itemClass(index)" :key="index" role="none" @mouseenter="onItemMouseEnter(index)">
+                <template v-if="!template">
+                    <router-link v-if="item.to && !disabled(item)" :to="item.to" custom v-slot="{href}">
+                        <a :href="href" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
+                            :data-pr-tooltip="item.label" @click="onItemClick(e, item)">
+                            <template v-if="typeof item.icon === 'string'">
+                                <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
+                            </template>
+                            <component v-else :is="item.icon"></component>
+                        </a>
+                    </router-link>
+                    <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target"
+                        :data-pr-tooltip="item.label" @click="onItemClick($event, item)">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
                         <component v-else :is="item.icon"></component>
                     </a>
-                </router-link>
-                <a v-else :href="item.url || '#'" role="menuitem" :class="['p-dock-action', { 'p-disabled': disabled(item) }]" :target="item.target" 
-                    :data-pr-tooltip="item.label" @click="onItemClick($event, item)">
-                    <template v-if="typeof item.icon === 'string'">
-                        <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
-                    </template>
-                    <component v-else :is="item.icon"></component>
-                </a>
-            </template>
-            <component v-else :is="template" :item="item"></component>
-        </li>
-    </ul>
+                </template>
+                <component v-else :is="template" :item="item"></component>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>
@@ -31,7 +33,7 @@ export default {
         model: {
             type: Array,
             default: null
-        }, 
+        },
         template: {
             type: Function,
             default: null
@@ -70,4 +72,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>