From 7d86b48f28c67dd6e0132e1bb5732ee01971c532 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Wed, 22 Nov 2023 13:36:31 +0300
Subject: [PATCH] Fixed #4862 - MegaMenu / Menubar: menubutton templating

---
 components/lib/megamenu/MegaMenu.d.ts | 23 ++++++++++++++
 components/lib/megamenu/MegaMenu.vue  | 38 ++++++++++++-----------
 components/lib/menubar/Menubar.d.ts   | 30 ++++++++++++++++--
 components/lib/menubar/Menubar.vue    | 44 ++++++++++++++-------------
 4 files changed, 93 insertions(+), 42 deletions(-)

diff --git a/components/lib/megamenu/MegaMenu.d.ts b/components/lib/megamenu/MegaMenu.d.ts
index 710876f5f..d6b64949e 100755
--- a/components/lib/megamenu/MegaMenu.d.ts
+++ b/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.
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index ac1854d2d..c0ba7250e 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -3,24 +3,26 @@
         <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>
+        <slot :id="id" name="menubutton" :class="cx('menubutton')" :toggleCallback="(event) => menuButtonClick(event)">
+            <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>
+        </slot>
         <MegaMenuSub
             :ref="menubarRef"
             :id="id + '_list'"
diff --git a/components/lib/menubar/Menubar.d.ts b/components/lib/menubar/Menubar.d.ts
index 7d90acc61..97b7e1e3a 100755
--- a/components/lib/menubar/Menubar.d.ts
+++ b/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.
diff --git a/components/lib/menubar/Menubar.vue b/components/lib/menubar/Menubar.vue
index 62420da7a..e90310af2 100755
--- a/components/lib/menubar/Menubar.vue
+++ b/components/lib/menubar/Menubar.vue
@@ -3,24 +3,26 @@
         <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('button')"
-            :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="{ ...buttonProps, ...ptm('button') }"
-        >
-            <slot name="popupicon">
-                <BarsIcon v-bind="ptm('popupIcon')" />
-            </slot>
-        </a>
+        <slot :id="id" name="menubutton" :class="cx('button')" :toggleCallback="(event) => menuButtonClick(event)">
+            <a
+                v-if="model && model.length > 0"
+                ref="menubutton"
+                role="button"
+                tabindex="0"
+                :class="cx('button')"
+                :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="{ ...buttonProps, ...ptm('button') }"
+            >
+                <slot name="menubuttonicon">
+                    <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 isOutsideMenuButton = this.mobileActive && this.$refs.menubutton ? this.$refs.menubutton !== event.target && !this.$refs.menubutton.contains(event.target) : true;
+                    const isOutsideContainer = this.container && !this.container.contains(event.target);
+                    const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
 
-                    if (isOutsideMenuButton && isOutsideContainer) {
+                    if (isOutsideContainer && isOutsideTarget) {
                         this.hide();
                     }
                 };