Refactor #4819

components/lib/megamenu/BaseMegaMenu.vue

@@ -14,6 +14,10 @@ export default {
             type: String,
             default: 'horizontal'
         },
+        breakpoint: {
+            type: String,
+            default: '960px'
+        },
         disabled: {
             type: Boolean,
             default: false

components/lib/megamenu/MegaMenu.vue

@@ -55,7 +55,8 @@ export default {
             focused: false,
             focusedItemInfo: { index: -1, key: '', parentKey: '' },
             activeItem: null,
-            dirty: false
+            dirty: false,
+            queryMatches: false
         };
     },
     watch: {
@@ -74,6 +75,13 @@ export default {
     },
     mounted() {
         this.id = this.id || UniqueComponentId();
+        const query = matchMedia(`(max-width: ${this.breakpoint})`);
+
+        this.queryMatches = query.matches;
+
+        query.addEventListener('change', () => {
+            this.queryMatches = query.matches;
+        });
     },
     beforeUnmount() {
         this.unbindOutsideClickListener();

components/lib/megamenu/style/MegaMenuStyle.js

@@ -111,6 +111,12 @@ const css = `
     .p-megamenu-col-12 {
         width: 100%;
     }
+
+    .p-megamenu-mobile .p-megamenu-grid {
+        flex-wrap: wrap;
+        overflow: auto;
+        max-height: 90%;
+    }
 }
 `;
 
@@ -122,6 +128,7 @@ const classes = {
     root: ({ instance }) => [
         'p-megamenu p-component',
         {
+            'p-megamenu-mobile': instance.queryMatches,
             'p-megamenu-horizontal': instance.horizontal,
             'p-megamenu-vertical': instance.vertical
         }
@@ -153,26 +160,29 @@ const classes = {
         let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
         let columnClass;
 
-        switch (length) {
+        if (instance.$parentInstance.queryMatches) columnClass = 'p-megamenu-col-12';
-            case 2:
+        else {
-                columnClass = 'p-megamenu-col-6';
+            switch (length) {
-                break;
+                case 2:
+                    columnClass = 'p-megamenu-col-6';
+                    break;
 
-            case 3:
+                case 3:
-                columnClass = 'p-megamenu-col-4';
+                    columnClass = 'p-megamenu-col-4';
-                break;
+                    break;
 
-            case 4:
+                case 4:
-                columnClass = 'p-megamenu-col-3';
+                    columnClass = 'p-megamenu-col-3';
-                break;
+                    break;
 
-            case 6:
+                case 6:
-                columnClass = 'p-megamenu-col-2';
+                    columnClass = 'p-megamenu-col-2';
-                break;
+                    break;
 
-            default:
+                default:
-                columnClass = 'p-megamenu-col-12';
+                    columnClass = 'p-megamenu-col-12';
-                break;
+                    break;
+            }
         }
 
         return columnClass;