From 4c314d5b241f2c599507017a61553976aecbabef Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 15 Nov 2023 14:30:23 +0300
Subject: [PATCH] Fixed #4819 - MegaMenu responsiveness updates

---
 components/lib/megamenu/MegaMenu.d.ts         |  4 ++
 components/lib/megamenu/MegaMenu.vue          | 69 +++++++++++++++++--
 components/lib/megamenu/MegaMenuSub.vue       |  5 ++
 .../lib/megamenu/style/MegaMenuStyle.js       | 42 ++++++++++-
 public/themes/arya-blue/theme.css             | 46 +++++++++++++
 public/themes/arya-green/theme.css            | 46 +++++++++++++
 public/themes/arya-orange/theme.css           | 46 +++++++++++++
 public/themes/arya-purple/theme.css           | 46 +++++++++++++
 public/themes/bootstrap4-dark-blue/theme.css  | 46 +++++++++++++
 .../themes/bootstrap4-dark-purple/theme.css   | 46 +++++++++++++
 public/themes/bootstrap4-light-blue/theme.css | 46 +++++++++++++
 .../themes/bootstrap4-light-purple/theme.css  | 46 +++++++++++++
 public/themes/fluent-light/theme.css          | 46 +++++++++++++
 public/themes/lara-dark-amber/theme.css       | 46 +++++++++++++
 public/themes/lara-dark-blue/theme.css        | 46 +++++++++++++
 public/themes/lara-dark-cyan/theme.css        | 46 +++++++++++++
 public/themes/lara-dark-indigo/theme.css      | 46 +++++++++++++
 public/themes/lara-dark-pink/theme.css        | 46 +++++++++++++
 public/themes/lara-dark-purple/theme.css      | 46 +++++++++++++
 public/themes/lara-dark-teal/theme.css        | 46 +++++++++++++
 public/themes/lara-dark-turquoise/theme.css   | 46 +++++++++++++
 public/themes/lara-light-amber/theme.css      | 46 +++++++++++++
 public/themes/lara-light-blue/theme.css       | 46 +++++++++++++
 public/themes/lara-light-cyan/theme.css       | 46 +++++++++++++
 public/themes/lara-light-indigo/theme.css     | 46 +++++++++++++
 public/themes/lara-light-pink/theme.css       | 46 +++++++++++++
 public/themes/lara-light-purple/theme.css     | 46 +++++++++++++
 public/themes/lara-light-teal/theme.css       | 46 +++++++++++++
 public/themes/lara-light-turquoise/theme.css  | 46 +++++++++++++
 public/themes/luna-amber/theme.css            | 46 +++++++++++++
 public/themes/luna-blue/theme.css             | 46 +++++++++++++
 public/themes/luna-green/theme.css            | 46 +++++++++++++
 public/themes/luna-pink/theme.css             | 46 +++++++++++++
 public/themes/md-dark-deeppurple/theme.css    | 46 +++++++++++++
 public/themes/md-dark-indigo/theme.css        | 46 +++++++++++++
 public/themes/md-light-deeppurple/theme.css   | 46 +++++++++++++
 public/themes/md-light-indigo/theme.css       | 46 +++++++++++++
 public/themes/mdc-dark-deeppurple/theme.css   | 46 +++++++++++++
 public/themes/mdc-dark-indigo/theme.css       | 46 +++++++++++++
 public/themes/mdc-light-deeppurple/theme.css  | 46 +++++++++++++
 public/themes/mdc-light-indigo/theme.css      | 46 +++++++++++++
 public/themes/mira/theme.css                  | 46 +++++++++++++
 public/themes/nano/theme.css                  | 46 +++++++++++++
 public/themes/nova-accent/theme.css           | 46 +++++++++++++
 public/themes/nova-alt/theme.css              | 46 +++++++++++++
 public/themes/nova-vue/theme.css              | 46 +++++++++++++
 public/themes/nova/theme.css                  | 46 +++++++++++++
 public/themes/rhea/theme.css                  | 46 +++++++++++++
 public/themes/saga-blue/theme.css             | 46 +++++++++++++
 public/themes/saga-green/theme.css            | 46 +++++++++++++
 public/themes/saga-orange/theme.css           | 46 +++++++++++++
 public/themes/saga-purple/theme.css           | 46 +++++++++++++
 public/themes/soho-dark/theme.css             | 46 +++++++++++++
 public/themes/soho-light/theme.css            | 46 +++++++++++++
 public/themes/tailwind-light/theme.css        | 46 +++++++++++++
 public/themes/vela-blue/theme.css             | 46 +++++++++++++
 public/themes/vela-green/theme.css            | 46 +++++++++++++
 public/themes/vela-orange/theme.css           | 46 +++++++++++++
 public/themes/vela-purple/theme.css           | 46 +++++++++++++
 public/themes/viva-dark/theme.css             | 46 +++++++++++++
 public/themes/viva-light/theme.css            | 46 +++++++++++++
 61 files changed, 2736 insertions(+), 6 deletions(-)

diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
index 4b7193301..710876f5f 100755
--- a/components/lib/megamenu/MegaMenu.d.ts
+++ b/components/lib/megamenu/MegaMenu.d.ts
@@ -106,6 +106,10 @@ export interface MegaMenuPassThroughOptions {
      * Used to pass attributes to the separator's DOM element.
      */
     separator?: MegaMenuPassThroughOptionType;
+    /**
+     * Used to pass attributes to the mobile popup menu button's DOM element.
+     */
+    menubutton?: MegaMenuPassThroughOptionType;
     /**
      * Used to pass attributes to the start of the component.
      */
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 146a78e46..1c6d8b367 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -3,6 +3,24 @@
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
+        <a
+            v-if="model && model.length > 0"
+            ref="menubutton"
+            role="button"
+            tabindex="0"
+            :class="cx('menubutton')"
+            :aria-haspopup="model.length && model.length > 0 ? true : false"
+            :aria-expanded="mobileActive"
+            :aria-controls="id"
+            :aria-label="$primevue.config.locale.aria?.navigation"
+            @click="menuButtonClick($event)"
+            @keydown="menuButtonKeydown($event)"
+            v-bind="ptm('menubutton')"
+        >
+            <slot name="menubuttonicon">
+                <BarsIcon v-bind="ptm('menubuttonicon')" />
+            </slot>
+        </a>
         <MegaMenuSub
             :ref="menubarRef"
             :id="id + '_list'"
@@ -19,6 +37,7 @@
             :horizontal="horizontal"
             :templates="$slots"
             :activeItem="activeItem"
+            :mobileActive="mobileActive"
             :level="0"
             :pt="pt"
             :unstyled="unstyled"
@@ -35,7 +54,8 @@
 </template>
 
 <script>
-import { DomHandler, ObjectUtils, UniqueComponentId } from 'primevue/utils';
+import BarsIcon from 'primevue/icons/bars';
+import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import BaseMegaMenu from './BaseMegaMenu.vue';
 import MegaMenuSub from './MegaMenuSub.vue';
 
@@ -52,6 +72,7 @@ export default {
     data() {
         return {
             id: this.$attrs.id,
+            mobileActive: false,
             focused: false,
             focusedItemInfo: { index: -1, key: '', parentKey: '' },
             activeItem: null,
@@ -84,6 +105,7 @@ export default {
         });
     },
     beforeUnmount() {
+        this.mobileActive = false;
         this.unbindOutsideClickListener();
         this.unbindResizeListener();
     },
@@ -109,7 +131,35 @@ export default {
         isProccessedItemGroup(processedItem) {
             return processedItem && ObjectUtils.isNotEmpty(processedItem.items);
         },
+        toggle(event) {
+            if (this.mobileActive) {
+                this.mobileActive = false;
+                ZIndexUtils.clear(this.menubar);
+                this.hide();
+            } else {
+                this.mobileActive = true;
+                ZIndexUtils.set('menu', this.menubar, this.$primevue.config.zIndex.menu);
+                setTimeout(() => {
+                    this.show();
+                }, 1);
+            }
+
+            this.bindOutsideClickListener();
+            event.preventDefault();
+        },
+        show() {
+            this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+
+            DomHandler.focus(this.menubar);
+        },
         hide(event, isFocus) {
+            if (this.mobileActive) {
+                this.mobileActive = false;
+                setTimeout(() => {
+                    DomHandler.focus(this.$refs.menubutton);
+                }, 0);
+            }
+
             this.activeItem = null;
             this.focusedItemInfo = { index: -1, key: '', parentKey: '' };
 
@@ -237,16 +287,22 @@ export default {
 
                     this.hide(originalEvent);
                     this.changeFocusedItemInfo(originalEvent, rootProcessedItem ? rootProcessedItem.index : -1);
-
+                    this.mobileActive = false;
                     DomHandler.focus(this.menubar);
                 }
             }
         },
         onItemMouseEnter(event) {
-            if (this.dirty) {
+            if (!this.mobileActive && this.dirty) {
                 this.onItemChange(event);
             }
         },
+        menuButtonClick(event) {
+            this.toggle(event);
+        },
+        menuButtonKeydown(event) {
+            (event.code === 'Enter' || event.code === 'Space') && this.menuButtonClick(event);
+        },
         onArrowDownKey(event) {
             if (this.horizontal) {
                 if (ObjectUtils.isNotEmpty(this.activeItem) && this.activeItem.key === this.focusedItemInfo.key) {
@@ -398,7 +454,7 @@ export default {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
                     const isOutsideContainer = this.container && !this.container.contains(event.target);
-                    const isOutsideTarget = this.popup ? !(this.target && (this.target === event.target || this.target.contains(event.target))) : true;
+                    const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
 
                     if (isOutsideContainer && isOutsideTarget) {
                         this.hide();
@@ -420,6 +476,8 @@ export default {
                     if (!DomHandler.isTouchDevice()) {
                         this.hide(event, true);
                     }
+
+                    this.mobileActive = false;
                 };
 
                 window.addEventListener('resize', this.resizeListener);
@@ -586,7 +644,8 @@ export default {
         }
     },
     components: {
-        MegaMenuSub: MegaMenuSub
+        MegaMenuSub: MegaMenuSub,
+        BarsIcon: BarsIcon
     }
 };
 </script>
diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index 0e5c4b8b4..6fa6add08 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -49,6 +49,7 @@
                                 :items="submenu.items"
                                 :templates="templates"
                                 :level="level + 1"
+                                :mobileActive="mobileActive"
                                 :pt="pt"
                                 :unstyled="unstyled"
                                 @item-click="$emit('item-click', $event)"
@@ -100,6 +101,10 @@ export default {
             type: Object,
             default: null
         },
+        mobileActive: {
+            type: Boolean,
+            default: false
+        },
         items: {
             type: Array,
             default: null
diff --git a/components/lib/megamenu/style/MegaMenuStyle.js b/components/lib/megamenu/style/MegaMenuStyle.js
index ba3045d3c..ff0dd2d9c 100644
--- a/components/lib/megamenu/style/MegaMenuStyle.js
+++ b/components/lib/megamenu/style/MegaMenuStyle.js
@@ -45,6 +45,14 @@ const css = `
         list-style: none;
     }
 
+    .p-megamenu-button {
+        display: none;
+        cursor: pointer;
+        align-items: center;
+        justify-content: center;
+        text-decoration: none;
+    }
+
     /* Horizontal */
     .p-megamenu-horizontal {
         align-items: center;
@@ -112,7 +120,37 @@ const css = `
         width: 100%;
     }
 
-    .p-megamenu-mobile .p-megamenu-grid {
+    .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+        display: flex;
+    }
+
+    .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+        position: absolute;
+        display: none;
+        width: 100%;
+    }
+
+    .p-megamenu.p-megamenu-mobile .p-submenu-list {
+        width: 100%;
+        position: static;
+        box-shadow: none;
+        border: 0 none;
+    }
+
+    .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem {
+        width: 100%;
+        position: static;
+    }
+
+    .p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
+        display: flex;
+        flex-direction: column;
+        top: 100%;
+        left: 0;
+        z-index: 1;
+    }
+
+    .p-megamenu.p-megamenu-mobile .p-megamenu-grid {
         flex-wrap: wrap;
         overflow: auto;
         max-height: 90%;
@@ -129,11 +167,13 @@ const classes = {
         'p-megamenu p-component',
         {
             'p-megamenu-mobile': instance.queryMatches,
+            'p-megamenu-mobile-active': instance.mobileActive,
             'p-megamenu-horizontal': instance.horizontal,
             'p-megamenu-vertical': instance.vertical
         }
     ],
     start: 'p-megamenu-start',
+    menubutton: 'p-megamenu-button',
     menu: 'p-megamenu-root-list',
     submenuHeader: ({ instance, processedItem }) => [
         'p-megamenu-submenu-header p-submenu-header',
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index 171a48b77..fcb949f91 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 54d40c6b1..5ecb9dacc 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index 08aff10c3..87558eff9 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index 93f058c6c..2f678dd6b 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1e1e1e;
+    border: 1px solid #383838;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #383838;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 2a492c9d4..f5ec94222 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -4458,6 +4458,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e3f3fe;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index dacf50fce..dc006d569 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -4458,6 +4458,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: color 0.15s, box-shadow 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #f0e6f5;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2a323d;
+    border: 1px solid #3f4b5b;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #3f4b5b;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 72f029cd1..55c71cd9b 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -4458,6 +4458,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(0, 0, 0, 0.7);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index e0ab65870..23f394d12 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -4458,6 +4458,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(0, 0, 0, 0.7);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.5);
+    border-radius: 50%;
+    transition: box-shadow 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.7);
+    background: transparent;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(136, 60, 174, 0.5);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.15s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.15s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 566da1bbe..f08df6c79 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -4421,6 +4421,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #0078d4;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #0078d4;
+    border-radius: 2px;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #0078d4;
+    background: #f3f2f1;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: inset 0 0 0 1px #605e5c;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #edebe9;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index f7c7b8ca1..18da6f116 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index bd17617e7..5332c2e50 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(96, 165, 250, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 714dda71a..806833821 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 36014163c..72a48a036 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(129, 140, 248, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 179e8cc0f..e1858b984 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(244, 114, 182, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index af52407ea..9a486ecec 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(167, 139, 250, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index e2b297343..f72c133c0 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-dark-turquoise/theme.css b/public/themes/lara-dark-turquoise/theme.css
index 026a67d51..9db0b2896 100644
--- a/public/themes/lara-dark-turquoise/theme.css
+++ b/public/themes/lara-dark-turquoise/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem rgba(45, 212, 191, 0.2);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #374151;
+    border: 1px solid #424b57;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #424b57;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index 9927d2627..a3ec64fe8 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fef08a;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index 6023d75f8..07e01a2a0 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #BFDBFE;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index 839e1a3f3..374c77db4 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a5f3fc;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index d9c660e4d..ed675bba2 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #C7D2FE;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 22f0c9e4b..acdf8fd39 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #fbcfe8;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 6d2cc8525..9a01dc977 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #DDD6FE;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index dc0e51982..fd3489969 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a7f3d0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/lara-light-turquoise/theme.css b/public/themes/lara-light-turquoise/theme.css
index a5d9db447..b2f8bac38 100644
--- a/public/themes/lara-light-turquoise/theme.css
+++ b/public/themes/lara-light-turquoise/theme.css
@@ -4440,6 +4440,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6b7280;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6b7280;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6b7280;
+    background: #f3f4f6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #99f6e4;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #e5e7eb;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index bed5abc60..d8b20b77c 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -4433,6 +4433,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #dedede;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 0721b8157..78fa7a6f9 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -4433,6 +4433,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #dedede;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index c4bd93222..e00f980da 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -4433,6 +4433,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #dedede;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index f22f8b52c..191378d1d 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -4433,6 +4433,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #dedede;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #dedede;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #dedede;
+    background: #4c4c4c;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem white;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #252525;
+    border: 1px solid #191919;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #4b4b4b;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 69f57c814..b079ae5f0 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 3rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index be67383e8..8f6b947ea 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 3rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 09562db2e..14d2cb667 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 3rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index c6b1e86ec..8d1d77a3c 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2.5rem;
+    height: 2.5rem;
+    color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 3rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 780cf6d3e..efa6dee55 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 61248bb59..0bb217673 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.6);
+    background: rgba(255, 255, 255, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #2b2b2b;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 91f254bc7..8e04d251a 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 026db28e1..68b1b3365 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -4470,6 +4470,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(0, 0, 0, 0.6);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(0, 0, 0, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(0, 0, 0, 0.6);
+    background: rgba(0, 0, 0, 0.04);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid rgba(0, 0, 0, 0.12);
+    margin: 0.5rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index 2310d997b..bd7b058fa 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -4474,6 +4474,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #81A1C1;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #81A1C1;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #81A1C1;
+    background: #ffffff;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #C0D0E0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #E5E9F0;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 8b37c16e7..98cde5f62 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #697077;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 1rem;
+    height: 1rem;
+    color: #697077;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #697077;
+    background: #dde1e6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #90c9f5;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 1.5rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index 9dd33788c..e27e428b4 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -4421,6 +4421,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #333333;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index a56839a77..18f0ef2d7 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -4433,6 +4433,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #333333;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 8647a038a..182eb0cfc 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -4433,6 +4433,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #333333;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #c2e9d8;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index f9948af6a..7d560618d 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -4433,6 +4433,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #333333;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #333333;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #333333;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #8dcdff;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #c8c8c8;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #d8dae2;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 657a3dfe2..c3f948325 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -4421,6 +4421,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #666666;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #666666;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #666666;
+    background: #eaeaea;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #e4e9ec;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0;
+    background: #ffffff;
+    border: 1px solid #eaeaea;
+    box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dadada;
+    margin: 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.571rem;
+  }
 
   .p-menu {
     padding: 0;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 729a5d796..832c0abfc 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6c757d;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #a6d5fa;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index 9a181e8af..c6c742c3f 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6c757d;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #b7e0b8;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 75876bdb9..4a947f968 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6c757d;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #ffe69c;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index dad62fa37..f13be7266 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #6c757d;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #6c757d;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #6c757d;
+    background: #e9ecef;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.2rem #df9eea;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dee2e6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index 175b8fa9f..4a9df23b1 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -4445,6 +4445,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #e0d8fc;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #333544;
+    border: 1px solid #3e4053;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #3e4053;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 16edff93c..7454c8a21 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -4445,6 +4445,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #708da9;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #708da9;
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #708da9;
+    background: #f6f9fc;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #c7bbfa;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #eff3f8;
+    border: 0 none;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #dfe7ef;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index c265b4e36..45644c50e 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -4481,6 +4481,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #71717A;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #71717A;
+    border-radius: 50%;
+    transition: none;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #71717A;
+    background: #f4f4f5;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #6366F1;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #f3f4f6;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index c6048a8a8..8dcd99af2 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #93cbf9;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index a1abfb2d3..a54a12f0e 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #a7d8a9;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index 3b50b6594..4bdc5f3eb 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #ffe284;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index 9db8d4a44..19f8e6091 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -4446,6 +4446,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(255, 255, 255, 0.03);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #cf95d9;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.25rem 0;
+    background: #1f2d40;
+    border: 1px solid #304562;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #304562;
+    margin: 0.25rem 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.2s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.2s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.25rem 0;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 36815261b..5ad6f3ae8 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -4478,6 +4478,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: rgba(255, 255, 255, 0.87);
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: rgba(255, 255, 255, 0.6);
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: rgba(255, 255, 255, 0.87);
+    background: rgba(158, 173, 230, 0.08);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 1px #9eade6;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0.5rem;
+    background: #161d21;
+    border: 2px solid #263238;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #263238;
+    margin: 4px 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.3s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.3s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0.5rem;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 94d207eb7..15fac4514 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -4478,6 +4478,52 @@
   .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-menuitem-icon, .p-megamenu.p-megamenu-horizontal .p-megamenu-root-list > .p-menuitem:not(.p-highlight):not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-link .p-submenu-icon {
     color: #898989;
   }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button {
+    width: 2rem;
+    height: 2rem;
+    color: #898989;
+    border-radius: 50%;
+    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:hover {
+    color: #898989;
+    background: #edf0fA;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-button:focus {
+    outline: 0 none;
+    outline-offset: 0;
+    box-shadow: 0 0 0 0.1rem #bbc7ee;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
+    padding: 0.5rem 0.5rem;
+    background: #ffffff;
+    border: 0 none;
+    box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem-separator {
+    border-top: 1px solid #ebebeb;
+    margin: 4px 0;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-icon {
+    font-size: 0.875rem;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
+    margin-left: auto;
+    transition: transform 0.3s;
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem.p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-180deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-submenu-icon {
+    transition: transform 0.3s;
+    transform: rotate(90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem-active > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
+    transform: rotate(-90deg);
+  }
+  .p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link {
+    padding-left: 2.25rem;
+  }
 
   .p-menu {
     padding: 0.5rem 0.5rem;