From 38d8965b3774d6ea0a68fdfbe4db68233f9bd4aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 21 Apr 2022 12:10:21 +0300
Subject: [PATCH] Fixed #1939 - Sidebar new header templating

---
 api-generator/components/sidebar.js | 10 +++++++++-
 src/components/sidebar/Sidebar.d.ts |  4 ++++
 src/components/sidebar/Sidebar.vue  |  3 +++
 src/views/sidebar/SidebarDoc.vue    | 18 ++++++++++++++++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/sidebar.js b/api-generator/components/sidebar.js
index dedd1e444..8aef51f89 100644
--- a/api-generator/components/sidebar.js
+++ b/api-generator/components/sidebar.js
@@ -60,11 +60,19 @@ const SidebarEvents = [
     }
 ];
 
+const SidebarSlots = [
+    {
+        name: "header",
+        description: "Custom content for the component header."
+    }
+];
+
 module.exports = {
     sidebar: {
         name: "Sidebar",
         description: "Sidebar is a panel component displayed as an overlay at the edges of the screen.",
         props: SidebarProps,
-        events: SidebarEvents
+        events: SidebarEvents,
+        slots: SidebarSlots
     }
 };
diff --git a/src/components/sidebar/Sidebar.d.ts b/src/components/sidebar/Sidebar.d.ts
index 1eb286e82..98ab3b586 100755
--- a/src/components/sidebar/Sidebar.d.ts
+++ b/src/components/sidebar/Sidebar.d.ts
@@ -51,6 +51,10 @@ export interface SidebarSlots {
      * Custom content template.
      */
     default: () => VNode[];
+    /**
+     * Custom header template.
+     */
+    header: () => VNode[];
 }
 
 export declare type SidebarEmits = {
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 7ea92f1fc..59cb2f692 100755
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -3,6 +3,9 @@
         <transition name="p-sidebar" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" appear>
             <div :class="containerClass" v-if="visible" :ref="containerRef" role="complementary" :aria-modal="modal" v-bind="$attrs">
                 <div class="p-sidebar-header">
+                    <div class="p-sidebar-header-content" v-if="$slots.header">
+                        <slot name="header"></slot>
+                    </div>
                     <button class="p-sidebar-close p-sidebar-icon p-link" @click="hide" :aria-label="ariaCloseLabel" v-if="showCloseIcon" type="button" v-ripple>
                         <span class="p-sidebar-close-icon pi pi-times" />
                     </button>
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index 77edc23bf..a3ed4f7e1 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -141,6 +141,24 @@ import Sidebar from 'primevue/sidebar';
 			</table>
 		</div>
 
+		<h5>Slots</h5>
+		<div class="doc-tablewrapper">
+            <table class="doc-table">
+				<thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+				</thead>
+				<tbody>
+                    <tr>
+                        <td>header</td>
+                        <td>-</td>
+                    </tr>
+				</tbody>
+			</table>
+        </div>
+
 		<h5>Styling</h5>
 		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 		<div class="doc-tablewrapper">