From c8859219efdb56fc946608cbcfee0ec3d6a60f81 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Tue, 28 Apr 2020 14:12:01 +0300
Subject: [PATCH] Fixed #295 - Decouple MegaMenu from PrimeFlex

---
 src/components/megamenu/MegaMenu.vue | 46 ++++++++++++++++++++++++----
 src/views/megamenu/MegaMenuDoc.vue   |  2 +-
 2 files changed, 41 insertions(+), 7 deletions(-)

diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index 2fa0060eb..75f735368 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -11,7 +11,7 @@
                         <span v-if="category.items" :class="getCategorySubMenuIcon()"></span>
                     </a>
                     <div class="p-megamenu-panel" v-if="category.items">
-                        <div class="p-grid">
+                        <div class="p-megamenu-grid">
                             <div v-for="(column,columnIndex) of category.items" :key="category.label + '_column_' + columnIndex" :class="getColumnClassName(category)">
                                 <ul v-for="(submenu,submenuIndex) of column" class="p-megamenu-submenu" :key="submenu.label + '_submenu_' + submenuIndex" role="menu">
                                     <li :class="getSubmenuHeaderClass(submenu)" :style="submenu.style" role="presentation">{{submenu.label}}</li>
@@ -228,23 +228,23 @@ export default {
 
             switch(length) {
                 case 2:
-                    columnClass= 'p-col-6';
+                    columnClass= 'p-megamenu-col-6';
                 break;
 
                 case 3:
-                    columnClass= 'p-col-4';
+                    columnClass= 'p-megamenu-col-4';
                 break;
 
                 case 4:
-                    columnClass= 'p-col-3';
+                    columnClass= 'p-megamenu-col-3';
                 break;
 
                 case 6:
-                    columnClass= 'p-col-2';
+                    columnClass= 'p-megamenu-col-2';
                 break;
 
                 default:
-                    columnClass= 'p-col-12';
+                    columnClass= 'p-megamenu-col-12';
                 break;
             }
 
@@ -359,4 +359,38 @@ export default {
 .p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-link > .p-submenu-icon {
     margin-left: auto;
 }
+
+
+.p-megamenu-grid {
+    display: flex;
+}
+
+.p-megamenu-col-2,
+.p-megamenu-col-3,
+.p-megamenu-col-4,
+.p-megamenu-col-6,
+.p-megamenu-col-12 {
+    flex: 0 0 auto;
+    padding: 0.5em;
+}
+
+.p-megamenu-col-2 {
+    width: 16.6667%;
+}
+
+.p-megamenu-col-3 {
+    width: 25%;
+}
+
+.p-megamenu-col-4 {
+    width: 33.3333%;
+}
+
+.p-megamenu-col-6 {
+    width: 50%;
+}
+
+.p-megamenu-col-12 {
+    width: 100%;
+}
 </style>
\ No newline at end of file
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index 216118c54..41e4120a3 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -248,7 +248,7 @@ export default {
 				</div>
 
 				<h3>Dependencies</h3>
-				<p>PrimeFlex.</p>
+				<p>None.</p>
 			</TabPanel>
 
 			<TabPanel header="Source">