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,6 +160,8 @@ const classes = {
         let length = instance.isItemGroup(processedItem) ? processedItem.items.length : 0;
         let columnClass;
 
+        if (instance.$parentInstance.queryMatches) columnClass = 'p-megamenu-col-12';
+        else {
             switch (length) {
                 case 2:
                     columnClass = 'p-megamenu-col-6';
@@ -174,6 +183,7 @@ const classes = {
                     columnClass = 'p-megamenu-col-12';
                     break;
             }
+        }
 
         return columnClass;
     },