From b323225c3012784eb18aaeefbf378fd494f8f74a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 20 Sep 2021 15:31:09 +0300
Subject: [PATCH] Fixed #1567 - Responsive Dock v2

---
 src/components/dock/Dock.vue    |  5 +++++
 src/components/dock/DockSub.vue | 38 +++++++++++++++++----------------
 2 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/src/components/dock/Dock.vue b/src/components/dock/Dock.vue
index a08c12fb0c..03cf976f90 100644
--- a/src/components/dock/Dock.vue
+++ b/src/components/dock/Dock.vue
@@ -73,6 +73,11 @@ export default {
     pointer-events: none;
 }
 
+.p-dock-list-container {
+    display: flex;
+    pointer-events: auto;
+}
+
 .p-dock-list {
     margin: 0;
     padding: 0;
diff --git a/src/components/dock/DockSub.vue b/src/components/dock/DockSub.vue
index adbf03d87b..a8fed7a521 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)">
-            <DockSubTemplate v-if="templates['item']" :item="item" :template="templates['item']" />
-            <template v-else>
-                <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
-                    <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
-                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
+    <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)">
+                <DockSubTemplate v-if="templates['item']" :item="item" :template="templates['item']" />
+                <template v-else>
+                    <router-link v-if="item.to && !item.disabled" :to="item.to" custom v-slot="{navigate, href, isActive, isExactActive}">
+                        <a :href="href" role="menuitem" :class="linkClass(item, {isActive, isExactActive})" :target="item.target"
+                            v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item, navigate)">
+                            <template v-if="typeof item.icon === 'string'">
+                                <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
+                            </template>
+                            <DockSubIconTemplate v-else :icon="item.icon" />
+                        </a>
+                    </router-link>
+                    <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
+                        v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'">
                         <template v-if="typeof item.icon === 'string'">
                             <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
                         </template>
                         <DockSubIconTemplate v-else :icon="item.icon" />
                     </a>
-                </router-link>
-                <a v-else :href="item.url" role="menuitem" :class="linkClass(item)" :target="item.target"
-                    v-tooltip:[tooltipOptions]="{value: item.label, disabled: !tooltipOptions}" @click="onItemClick($event, item)" :tabindex="item.disabled ? null : '0'">
-                    <template v-if="typeof item.icon === 'string'">
-                        <span :class="['p-dock-action-icon', item.icon]" v-ripple></span>
-                    </template>
-                    <DockSubIconTemplate v-else :icon="item.icon" />
-                </a>
-            </template>
-        </li>
-    </ul>
+                </template>
+            </li>
+        </ul>
+    </div>
 </template>
 
 <script>