Fixed #4862 - MegaMenu / Menubar: menubutton templating

components/lib/megamenu/MegaMenu.d.ts

@@ -318,6 +318,29 @@ export interface MegaMenuSlots {
          */
         hasSubmenu: boolean;
     }): VNode[];
+    /**
+     * Custom menu button template on responsive mode.
+     * @param {Object} scope - menu button slot's params.
+     */
+    menubutton(scope: {
+        /**
+         * Current id state as a string
+         */
+        id: string;
+        /**
+         * Style class of component
+         */
+        class: string;
+        /**
+         *
+         * Toggle event
+         */
+        toggleCallback: () => void;
+    }): VNode[];
+    /**
+     * Custom menu button icon template on responsive mode.
+     */
+    menubuttonicon(): VNode[];
     /**
      * Custom submenu icon template.
      * @param {Object} scope - submenuicon slot's params.

components/lib/megamenu/MegaMenu.vue

@@ -3,6 +3,7 @@
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
+        <slot :id="id" name="menubutton" :class="cx('menubutton')" :toggleCallback="(event) => menuButtonClick(event)">
             <a
                 v-if="model && model.length > 0"
                 ref="menubutton"
@@ -21,6 +22,7 @@
                     <BarsIcon v-bind="ptm('menubuttonicon')" />
                 </slot>
             </a>
+        </slot>
         <MegaMenuSub
             :ref="menubarRef"
             :id="id + '_list'"

components/lib/menubar/Menubar.d.ts

@@ -83,13 +83,13 @@ export interface MenubarPassThroughOptions {
      */
     separator?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the mobile popup menu button's DOM element.
+     * Used to pass attributes to the mobile menu button's DOM element.
      */
     button?: MenubarPassThroughOptionType;
     /**
-     * Used to pass attributes to the mobile popup menu button icon's DOM element.
+     * Used to pass attributes to the mobile menu button icon's DOM element.
      */
-    popupIcon?: MenubarPassThroughOptionType;
+    menubuttonicon?: MenubarPassThroughOptionType;
     /**
      * Used to pass attributes to the submenu's DOM element.
      */
@@ -305,10 +305,34 @@ export interface MenubarSlots {
          */
         hasSubmenu: boolean;
     }): VNode[];
+    /**
+     * Custom menu button template on responsive mode.
+     * @param {Object} scope - menu button slot's params.
+     */
+    menubutton(scope: {
+        /**
+         * Current id state as a string
+         */
+        id: string;
+        /**
+         * Style class of component
+         */
+        class: string;
+        /**
+         *
+         * Toggle event
+         */
+        toggleCallback: () => void;
+    }): VNode[];
     /**
      * Custom popup icon template on responsive mode.
+     * @deprecated since v3.42.0. Use 'menubuttonicon' slot instead.
      */
     popupicon(): VNode[];
+    /**
+     * Custom menu button icon template on responsive mode.
+     */
+    menubuttonicon(): VNode[];
     /**
      * Custom submenu icon template.
      * @param {Object} scope - submenuicon slot's params.

components/lib/menubar/Menubar.vue

@@ -3,6 +3,7 @@
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
+        <slot :id="id" name="menubutton" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
             <a
                 v-if="model && model.length > 0"
                 ref="menubutton"
@@ -17,10 +18,11 @@
                 @keydown="menuButtonKeydown($event)"
                 v-bind="{ ...buttonProps, ...ptm('button') }"
             >
-            <slot name="popupicon">
+                <slot name="menubuttonicon">
-                <BarsIcon v-bind="ptm('popupIcon')" />
+                    <BarsIcon v-bind="ptm('menubuttonicon')" />
                 </slot>
             </a>
+        </slot>
         <MenubarSub
             :ref="menubarRef"
             :id="id"
@@ -422,10 +424,10 @@ export default {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                    const isOutsideContainer = this.menubar && !this.menubar.contains(event.target);
+                    const isOutsideContainer = this.container && !this.container.contains(event.target);
-                    const isOutsideMenuButton = this.mobileActive && this.$refs.menubutton ? this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target) : true;
+                    const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
 
-                    if (isOutsideMenuButton && isOutsideContainer) {
+                    if (isOutsideContainer && isOutsideTarget) {
                         this.hide();
                     }
                 };