From 65b17ad53bb106e2975a31aac146fc6f1ecfb559 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 30 May 2024 10:45:23 +0300
Subject: [PATCH] Better alignment for MegaMenu

---
 components/lib/megamenu/style/MegaMenuStyle.js | 6 ++++++
 components/lib/menubar/style/MenubarStyle.js   | 6 ++++++
 doc/megamenu/TemplateDoc.vue                   | 8 ++++----
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/components/lib/megamenu/style/MegaMenuStyle.js b/components/lib/megamenu/style/MegaMenuStyle.js
index e04508301..b0a815c62 100644
--- a/components/lib/megamenu/style/MegaMenuStyle.js
+++ b/components/lib/megamenu/style/MegaMenuStyle.js
@@ -12,6 +12,12 @@ const theme = ({ dt }) => `
     gap: ${dt('megamenu.gap')};
 }
 
+.p-megamenu-start, 
+.p-megamenu-end {
+    display: flex;
+    align-items: center;
+}
+
 .p-megamenu-root-list {
     margin: 0;
     padding: 0;
diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js
index 8b3c1eebe..b7e737f7d 100644
--- a/components/lib/menubar/style/MenubarStyle.js
+++ b/components/lib/menubar/style/MenubarStyle.js
@@ -12,6 +12,12 @@ const theme = ({ dt }) => `
     gap: ${dt('menubar.gap')};
 }
 
+.p-menubar-start, 
+.p-megamenu-end {
+    display: flex;
+    align-items: center;
+}
+
 .p-menubar-root-list,
 .p-menubar-submenu {
     display: flex;
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index a7d772510..004329cc9 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -32,7 +32,7 @@
                         <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
-                <div v-else class="flex flex-col items-start gap-4">
+                <div v-else class="flex flex-col items-start gap-4 p-2">
                     <img alt="megamenu-demo" :src="item.image" class="w-full" />
                     <span>{{ item.subtext }}</span>
                     <Button :label="item.label" outlined />
@@ -121,7 +121,7 @@ export default {
                 <span class="whitespace-nowrap">{{ item.subtext }}</span>
             </span>
         </a>
-        <div v-else class="flex flex-col items-start gap-4">
+        <div v-else class="flex flex-col items-start gap-4 p-2">
             <img alt="megamenu-demo" :src="item.image" class="w-full" />
             <span>{{ item.subtext }}</span>
             <Button :label="item.label" outlined />
@@ -162,7 +162,7 @@ export default {
                         <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
-                <div v-else class="flex flex-col items-start gap-4">
+                <div v-else class="flex flex-col items-start gap-4 p-2">
                     <img alt="megamenu-demo" :src="item.image" class="w-full" />
                     <span>{{ item.subtext }}</span>
                     <Button :label="item.label" outlined />
@@ -262,7 +262,7 @@ export default {
                         <span class="whitespace-nowrap">{{ item.subtext }}</span>
                     </span>
                 </a>
-                <div v-else class="flex flex-col items-start gap-4">
+                <div v-else class="flex flex-col items-start gap-4 p-2">
                     <img alt="megamenu-demo" :src="item.image" class="w-full" />
                     <span>{{ item.subtext }}</span>
                     <Button :label="item.label" outlined />