From 0f86b62fe2386104c033afac062c56a1f359f026 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: Tue, 19 Sep 2023 13:23:58 +0300
Subject: [PATCH] Refactor #4433 - Sidebar

---
 api-generator/components/sidebar.js |  4 ++++
 components/lib/sidebar/Sidebar.d.ts | 10 ++++++++++
 components/lib/sidebar/Sidebar.vue  | 27 +++++++++++++++------------
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/api-generator/components/sidebar.js b/api-generator/components/sidebar.js
index 6d8ee73d4..d942aa12d 100644
--- a/api-generator/components/sidebar.js
+++ b/api-generator/components/sidebar.js
@@ -96,6 +96,10 @@ const SidebarSlots = [
     {
         name: 'closeicon',
         description: 'Custom close icon template.'
+    },
+    {
+        name: 'container',
+        description: 'Custom container template.'
     }
 ];
 
diff --git a/components/lib/sidebar/Sidebar.d.ts b/components/lib/sidebar/Sidebar.d.ts
index 2fb7e9e45..993f05820 100755
--- a/components/lib/sidebar/Sidebar.d.ts
+++ b/components/lib/sidebar/Sidebar.d.ts
@@ -188,6 +188,16 @@ export interface SidebarSlots {
          */
         class: any;
     }): VNode[];
+    /**
+     * Custom container slot.
+     * @param {Object} scope - container slot's params.
+     */
+    container(scope: {
+        /**
+         * Close sidebar function.
+         */
+        onClose: () => void;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue
index 4fb3874f1..3babd17bc 100755
--- a/components/lib/sidebar/Sidebar.vue
+++ b/components/lib/sidebar/Sidebar.vue
@@ -3,19 +3,22 @@
         <div v-if="containerVisible" :ref="maskRef" @mousedown="onMaskClick" :class="cx('mask')" :style="sx('mask', true, { position })" v-bind="ptm('mask')">
             <transition name="p-sidebar" @enter="onEnter" @after-enter="onAfterEnter" @before-leave="onBeforeLeave" @leave="onLeave" @after-leave="onAfterLeave" appear v-bind="ptm('transition')">
                 <div v-if="visible" :ref="containerRef" v-focustrap :class="cx('root')" role="complementary" :aria-modal="modal" @keydown="onKeydown" v-bind="{ ...$attrs, ...ptm('root') }">
-                    <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
-                        <div v-if="$slots.header" :class="cx('headerContent')" v-bind="ptm('headerContent')">
-                            <slot name="header"></slot>
+                    <slot v-if="$slots.container" name="container" :onClose="hide"></slot>
+                    <template v-else>
+                        <div :ref="headerContainerRef" :class="cx('header')" v-bind="ptm('header')">
+                            <div v-if="$slots.header" :class="cx('headerContent')" v-bind="ptm('headerContent')">
+                                <slot name="header"></slot>
+                            </div>
+                            <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')" data-pc-group-section="iconcontainer">
+                                <slot name="closeicon" :class="cx('closeIcon')">
+                                    <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
+                                </slot>
+                            </button>
                         </div>
-                        <button v-if="showCloseIcon" :ref="closeButtonRef" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="hide" v-bind="ptm('closeButton')" data-pc-group-section="iconcontainer">
-                            <slot name="closeicon" :class="cx('closeIcon')">
-                                <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon]" v-bind="ptm('closeIcon')"></component>
-                            </slot>
-                        </button>
-                    </div>
-                    <div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
-                        <slot></slot>
-                    </div>
+                        <div :ref="contentRef" :class="cx('content')" v-bind="ptm('content')">
+                            <slot></slot>
+                        </div>
+                    </template>
                 </div>
             </transition>
         </div>