From 08b31ea2cccb6b33e01593b198dbc3d7504eb7b5 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 20 Nov 2023 10:48:32 +0300
Subject: [PATCH] Sidebar demo updates

---
 doc/sidebar/BasicDoc.vue      | 12 +++------
 doc/sidebar/FullScreenDoc.vue | 12 +++------
 doc/sidebar/PositionDoc.vue   | 48 ++++++++++++-----------------------
 doc/sidebar/SizeDoc.vue       | 12 +++------
 doc/sidebar/TemplateDoc.vue   | 46 +++++++--------------------------
 doc/sidebar/pt/PTDoc.vue      |  9 +++----
 6 files changed, 41 insertions(+), 98 deletions(-)

diff --git a/doc/sidebar/BasicDoc.vue b/doc/sidebar/BasicDoc.vue
index 957f340e8..bfd6be4b2 100644
--- a/doc/sidebar/BasicDoc.vue
+++ b/doc/sidebar/BasicDoc.vue
@@ -3,8 +3,7 @@
         <p>Sidebar is used as a container and visibility is controlled with a binding to <i>visible</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -20,8 +19,7 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-content-center">
-    <Sidebar v-model:visible="visible">
-        <h2>Sidebar</h2>
+    <Sidebar v-model:visible="visible" header="Sidebar">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -30,8 +28,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -51,8 +48,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
diff --git a/doc/sidebar/FullScreenDoc.vue b/doc/sidebar/FullScreenDoc.vue
index 62b2a4a90..dcc590e17 100644
--- a/doc/sidebar/FullScreenDoc.vue
+++ b/doc/sidebar/FullScreenDoc.vue
@@ -3,8 +3,7 @@
         <p>The whole page is covered when <i>position</i> property is set as <i>full</i>.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" position="full">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar" position="full">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-window-maximize" @click="visible = true" />
@@ -20,8 +19,7 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-content-center">
-    <Sidebar v-model:visible="visible" position="full">
-        <h2>Sidebar</h2>
+    <Sidebar v-model:visible="visible" header="Sidebar" position="full">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-window-maximize" @click="visible = true" />
@@ -30,8 +28,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" position="full">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar" position="full">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-window-maximize" @click="visible = true" />
@@ -51,8 +48,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" position="full">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar" position="full">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-window-maximize" @click="visible = true" />
diff --git a/doc/sidebar/PositionDoc.vue b/doc/sidebar/PositionDoc.vue
index af6b38587..c6d9b1fea 100644
--- a/doc/sidebar/PositionDoc.vue
+++ b/doc/sidebar/PositionDoc.vue
@@ -10,23 +10,19 @@
             <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
         </div>
 
-        <Sidebar v-model:visible="visibleLeft">
-            <h2>Left Sidebar</h2>
+        <Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleRight" position="right">
-            <h2>Right Sidebar</h2>
+        <Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
-            <h2>Top Sidebar</h2>
+        <Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
-            <h2>Bottom Sidebar</h2>
+        <Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
     </div>
@@ -50,23 +46,19 @@ export default {
     <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
 </div>
 
-<Sidebar v-model:visible="visibleLeft">
-    <h2>Left Sidebar</h2>
+<Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>
 
-<Sidebar v-model:visible="visibleRight" position="right">
-    <h2>Right Sidebar</h2>
+<Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>
 
-<Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
-    <h2>Top Sidebar</h2>
+<Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>
 
-<Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
-    <h2>Bottom Sidebar</h2>
+<Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>
 `,
@@ -80,23 +72,19 @@ export default {
             <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
         </div>
 
-        <Sidebar v-model:visible="visibleLeft">
-            <h2>Left Sidebar</h2>
+        <Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleRight" position="right">
-            <h2>Right Sidebar</h2>
+        <Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
-            <h2>Top Sidebar</h2>
+        <Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
-            <h2>Bottom Sidebar</h2>
+        <Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
     </div>
@@ -125,23 +113,19 @@ export default {
             <Button icon="pi pi-arrow-up" @click="visibleBottom = true" />
         </div>
 
-        <Sidebar v-model:visible="visibleLeft">
-            <h2>Left Sidebar</h2>
+        <Sidebar v-model:visible="visibleLeft" header="Left Sidebar">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleRight" position="right">
-            <h2>Right Sidebar</h2>
+        <Sidebar v-model:visible="visibleRight" header="Right Sidebar" position="right">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
-            <h2>Top Sidebar</h2>
+        <Sidebar v-model:visible="visibleTop" header="Top Sidebar" position="top" style="height: auto">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
 
-        <Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
-            <h2>Bottom Sidebar</h2>
+        <Sidebar v-model:visible="visibleBottom" header="Bottom Sidebar" position="bottom" style="height: auto">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
     </div>
diff --git a/doc/sidebar/SizeDoc.vue b/doc/sidebar/SizeDoc.vue
index 8ba759063..a2c791673 100644
--- a/doc/sidebar/SizeDoc.vue
+++ b/doc/sidebar/SizeDoc.vue
@@ -3,8 +3,7 @@
         <p>Sidebar dimension can be defined with <i>style</i> or <i>class</i> properties which can also be responsive when used with a CSS utility library like PrimeFlex or Tailwind.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -20,8 +19,7 @@ export default {
             code: {
                 basic: `
 <div class="card flex justify-content-center">
-    <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
-        <h2>Sidebar</h2>
+    <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </Sidebar>
     <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -30,8 +28,7 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -51,8 +48,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" class="w-full md:w-20rem lg:w-30rem">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar" class="w-full md:w-20rem lg:w-30rem">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
diff --git a/doc/sidebar/TemplateDoc.vue b/doc/sidebar/TemplateDoc.vue
index b1ddd5a04..bffbcffda 100644
--- a/doc/sidebar/TemplateDoc.vue
+++ b/doc/sidebar/TemplateDoc.vue
@@ -3,16 +3,9 @@
         <p>Additional content at the header section is provided using the <i>header</i> template.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar
-            v-model:visible="visible"
-            :pt="{
-                header: {
-                    style: 'justify-content: space-between'
-                }
-            }"
-        >
+        <Sidebar v-model:visible="visible">
             <template #header>
-                <div class="flex align-items-center gap-2 mr-auto">
+                <div class="flex align-items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
@@ -31,16 +24,9 @@ export default {
             visible: false,
             code: {
                 basic: `
-<Sidebar
-    v-model:visible="visible"
-    :pt="{
-        header: {
-            style: 'justify-content: space-between'
-        }
-    }"
->
+<Sidebar v-model:visible="visible">
     <template #header>
-        <div class="flex align-items-center gap-2 mr-auto">
+        <div class="flex align-items-center gap-2">
             <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
             <span class="font-bold">Amy Elsner</span>
         </div>
@@ -52,16 +38,9 @@ export default {
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar
-            v-model:visible="visible"
-            :pt="{
-                header: {
-                    style: 'justify-content: space-between'
-                }
-            }"
-        >
+        <Sidebar v-model:visible="visible">
             <template #header>
-                <div class="flex align-items-center gap-2 mr-auto">
+                <div class="flex align-items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
@@ -85,21 +64,14 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar
-            v-model:visible="visible"
-            :pt="{
-                header: {
-                    style: 'justify-content: space-between'
-                }
-            }"
-        >
-            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
+        <Sidebar v-model:visible="visible">
             <template #header>
-                <div class="flex align-items-center gap-2 mr-auto">
+                <div class="flex align-items-center gap-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-plus" @click="visible = true" />
     </div>
diff --git a/doc/sidebar/pt/PTDoc.vue b/doc/sidebar/pt/PTDoc.vue
index 62de38035..99401d371 100644
--- a/doc/sidebar/pt/PTDoc.vue
+++ b/doc/sidebar/pt/PTDoc.vue
@@ -1,8 +1,7 @@
 <template>
     <DocSectionText v-bind="$attrs"> </DocSectionText>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible" :pt="{ root: { class: 'w-25rem' } }">
-            <h2>Sidebar</h2>
+        <Sidebar v-model:visible="visible" header="Sidebar" :pt="{ root: { class: 'w-25rem' } }">
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -18,11 +17,11 @@ export default {
             code: {
                 basic: `
 <Sidebar v-model:visible="visible"
+    header="Sidebar"
     :pt="{
         root: { class: 'w-25rem' }
     }"
 >
-    <h2>Sidebar</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </Sidebar>
 <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -31,11 +30,11 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible"
+            header="Sidebar"
             :pt="{
                 root: { class: 'w-25rem' }
             }"
         >
-            <h2>Sidebar</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />
@@ -56,11 +55,11 @@ export default {
 <template>
     <div class="card flex justify-content-center">
         <Sidebar v-model:visible="visible"
+            header="Sidebar"
             :pt="{
                 root: { class: 'w-25rem' }
             }"
         >
-            <h2>Sidebar</h2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
         </Sidebar>
         <Button icon="pi pi-arrow-right" @click="visible = true" />