From 3f5d6a2bf1c16cb004d0d1db0aeb1220c230d9f6 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 27 Aug 2021 17:02:32 +0300
Subject: [PATCH] Fixed #1482 - start and end slots for MegaMenu, remove
 default slot

---
 api-generator/components/megamenu.js  |  8 ++++++++
 src/components/megamenu/MegaMenu.d.ts |  3 ++-
 src/components/megamenu/MegaMenu.vue  |  7 +++++--
 src/views/megamenu/MegaMenuDoc.vue    | 14 ++++++++------
 4 files changed, 23 insertions(+), 9 deletions(-)

diff --git a/api-generator/components/megamenu.js b/api-generator/components/megamenu.js
index 0a87a5623..ee6aaf138 100644
--- a/api-generator/components/megamenu.js
+++ b/api-generator/components/megamenu.js
@@ -20,6 +20,14 @@ const MegaMenuProps = [
 ];
 
 const MegaMenuSlots = [
+    {
+        name: "start",
+        description: "Custom content before the content"
+    },
+    {
+        name: "end",
+        description: "Custom content after the content"
+    },
     {
         name: "item",
         description: "Template of a menuitem."
diff --git a/src/components/megamenu/MegaMenu.d.ts b/src/components/megamenu/MegaMenu.d.ts
index 987f7d000..b36c0f1b9 100755
--- a/src/components/megamenu/MegaMenu.d.ts
+++ b/src/components/megamenu/MegaMenu.d.ts
@@ -9,7 +9,8 @@ interface MegaMenuProps {
 declare class MegaMenu {
     $props: MegaMenuProps;
     $slots: {
-        '': VNode[];
+        start: VNode[];
+        end: VNode[];
         item: VNode[];
     }
 }
diff --git a/src/components/megamenu/MegaMenu.vue b/src/components/megamenu/MegaMenu.vue
index 2139a118d..8f386b58a 100755
--- a/src/components/megamenu/MegaMenu.vue
+++ b/src/components/megamenu/MegaMenu.vue
@@ -1,5 +1,8 @@
 <template>
     <div :class="containerClass">
+        <div class="p-megamenu-start" v-if="$slots.start">
+            <slot name="start"></slot>
+        </div>
         <ul class="p-megamenu-root-list" role="menubar">
             <template v-for="(category,index) of model" :key="category.label + '_' + index">
                 <li v-if="visible(category)"  :class="getCategoryClass(category)" :style="category.style"
@@ -50,8 +53,8 @@
                 </li>
             </template>
         </ul>
-        <div class="p-megamenu-custom" v-if="$slots.default">
-            <slot></slot>
+        <div class="p-megamenu-end" v-if="$slots.end">
+            <slot name="end"></slot>
         </div>
     </div>
 </template>
diff --git a/src/views/megamenu/MegaMenuDoc.vue b/src/views/megamenu/MegaMenuDoc.vue
index 365b29470..8d0ac6a97 100755
--- a/src/views/megamenu/MegaMenuDoc.vue
+++ b/src/views/megamenu/MegaMenuDoc.vue
@@ -142,17 +142,19 @@ export default {
 
 </code></pre>
 
-        <h5>Custom Content</h5>
-        <p>Any content inside the megamenu will be displayed on the right side by default. You may use ".p-megamenu-custom" style class to change the location of the content.
-            Additionally, MegaMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.
-        </p>
+        <h5>Templating</h5>
+        <p>Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
 <pre v-code><code><template v-pre>
 &lt;MegaMenu :model="items"&gt;
-    &lt;InputText placeholder="Search" type="text" /&gt;
-    &lt;Button label="Logout" icon="pi pi-power-off" /&gt;
+     &lt;template #start&gt;
+        Before
+    &lt;/template&gt;
     &lt;template #item="{item}"&gt;
         &lt;a :href="item.url"&gt;{{item.label}}&lt;/a&gt;
     &lt;/template&gt;
+    &lt;template #end&gt;
+        After
+    &lt;/template&gt;
 &lt;/MegaMenu&gt;
 </template>
 </code></pre>