From c963e2e95fbefbee07c2c88f1aa12e7782f0bc5a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 1 Nov 2023 17:31:21 +0300
Subject: [PATCH] New sidebar demos

---
 assets/styles/layout/_code.scss |   4 -
 doc/sidebar/FullScreenDoc.vue   |  10 +-
 doc/sidebar/HeadlessDoc.vue     | 784 ++++++++++++++++++++++++++++++++
 doc/sidebar/PositionDoc.vue     |  18 +-
 doc/sidebar/SizeDoc.vue         |   2 +-
 doc/sidebar/TemplateDoc.vue     | 100 ++--
 pages/sidebar/index.vue         |   6 +
 7 files changed, 858 insertions(+), 66 deletions(-)
 create mode 100644 doc/sidebar/HeadlessDoc.vue

diff --git a/assets/styles/layout/_code.scss b/assets/styles/layout/_code.scss
index f872d088f..28663ba97 100644
--- a/assets/styles/layout/_code.scss
+++ b/assets/styles/layout/_code.scss
@@ -119,10 +119,6 @@ pre[class*="language-"] {
         .token.entity {
             cursor: help;
         }
-
-        .token.namespace {
-            opacity: .7;
-        }
     }
 }
 
diff --git a/doc/sidebar/FullScreenDoc.vue b/doc/sidebar/FullScreenDoc.vue
index b668da864..62b2a4a90 100644
--- a/doc/sidebar/FullScreenDoc.vue
+++ b/doc/sidebar/FullScreenDoc.vue
@@ -1,13 +1,13 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sidebar can cover the whole page when <i>position</i> property is equal to <i>full</i>.</p>
+        <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>
             <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" />
+        <Button icon="pi pi-window-maximize" @click="visible = true" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -24,7 +24,7 @@ export default {
         <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" />
+    <Button icon="pi pi-window-maximize" @click="visible = true" />
 </div>
 `,
                 options: `
@@ -34,7 +34,7 @@ export default {
             <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" />
+        <Button icon="pi pi-window-maximize" @click="visible = true" />
     </div>
 </template>
 
@@ -55,7 +55,7 @@ export default {
             <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" />
+        <Button icon="pi pi-window-maximize" @click="visible = true" />
     </div>
 </template>
 
diff --git a/doc/sidebar/HeadlessDoc.vue b/doc/sidebar/HeadlessDoc.vue
new file mode 100644
index 000000000..9aa7d63d1
--- /dev/null
+++ b/doc/sidebar/HeadlessDoc.vue
@@ -0,0 +1,784 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Headless mode is enabled by defining a <i>container</i> slot that lets you implement entire UI instead of the default elements.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-column h-full">
+                    <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                        <span class="inline-flex align-items-center gap-2">
+                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                    fill="var(--primary-color)"
+                                />
+                                <path
+                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                    fill="var(--text-color)"
+                                />
+                            </svg>
+                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                        </span>
+                        <span>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                        </span>
+                    </div>
+                    <div class="overflow-y-auto">
+                        <ul class="list-none p-3 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterClass: 'hidden',
+                                        enterActiveClass: 'slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'slideup'
+                                    }"
+                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">FAVORITES</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-home mr-2"></i>
+                                            <span class="font-medium">Dashboard</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-bookmark mr-2"></i>
+                                            <span class="font-medium">Bookmarks</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterClass: 'hidden',
+                                                enterActiveClass: 'slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'slideup'
+                                            }"
+                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Reports</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                            <li>
+                                                <a
+                                                    v-ripple
+                                                    v-styleclass="{
+                                                        selector: '@next',
+                                                        enterClass: 'hidden',
+                                                        enterActiveClass: 'slidedown',
+                                                        leaveToClass: 'hidden',
+                                                        leaveActiveClass: 'slideup'
+                                                    }"
+                                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                                >
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Revenue</span>
+                                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                                </a>
+                                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                    <li>
+                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-table mr-2"></i>
+                                                            <span class="font-medium">View</span>
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-search mr-2"></i>
+                                                            <span class="font-medium">Search</span>
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Expenses</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-users mr-2"></i>
+                                            <span class="font-medium">Team</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-comments mr-2"></i>
+                                            <span class="font-medium">Messages</span>
+                                            <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-calendar mr-2"></i>
+                                            <span class="font-medium">Calendar</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <ul class="list-none p-3 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterClass: 'hidden',
+                                        enterActiveClass: 'slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'slideup'
+                                    }"
+                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">APPLICATION</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-folder mr-2"></i>
+                                            <span class="font-medium">Projects</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-bar mr-2"></i>
+                                            <span class="font-medium">Performance</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mt-auto">
+                        <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
+                        <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <span class="font-bold">Amy Elsner</span>
+                        </a>
+                    </div>
+                </div>
+            </template>
+        </Sidebar>
+        <Button icon="pi pi-bars" @click="visible = true" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false,
+            code: {
+                basic: `
+<Sidebar v-model:visible="visible">
+    <template #container="{ closeCallback }">
+        <div class="flex flex-column h-full">
+            <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                <span class="inline-flex align-items-center gap-2">
+                    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="..." fill="var(--primary-color-color)" />
+                        <path d="..." fill="var(--text-color)" />
+                    </svg>
+                    <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                </span>
+                <span>
+                    <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                </span>
+            </div>
+            <div class="overflow-y-auto">
+                <ul class="list-none p-3 m-0">
+                    <li>
+                        <div
+                            v-ripple
+                            v-styleclass="{
+                                selector: '@next',
+                                enterClass: 'hidden',
+                                enterActiveClass: 'slidedown',
+                                leaveToClass: 'hidden',
+                                leaveActiveClass: 'slideup'
+                            }"
+                            class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                        >
+                            <span class="font-medium">FAVORITES</span>
+                            <i class="pi pi-chevron-down"></i>
+                        </div>
+                        <ul class="list-none p-0 m-0 overflow-hidden">
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-home mr-2"></i>
+                                    <span class="font-medium">Dashboard</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-bookmark mr-2"></i>
+                                    <span class="font-medium">Bookmarks</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterClass: 'hidden',
+                                        enterActiveClass: 'slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'slideup'
+                                    }"
+                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                >
+                                    <i class="pi pi-chart-line mr-2"></i>
+                                    <span class="font-medium">Reports</span>
+                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                </a>
+                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterClass: 'hidden',
+                                                enterActiveClass: 'slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'slideup'
+                                            }"
+                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Revenue</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                            <li>
+                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-table mr-2"></i>
+                                                    <span class="font-medium">View</span>
+                                                </a>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-search mr-2"></i>
+                                                    <span class="font-medium">Search</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Expenses</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-users mr-2"></i>
+                                    <span class="font-medium">Team</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-comments mr-2"></i>
+                                    <span class="font-medium">Messages</span>
+                                    <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-calendar mr-2"></i>
+                                    <span class="font-medium">Calendar</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-cog mr-2"></i>
+                                    <span class="font-medium">Settings</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+                <ul class="list-none p-3 m-0">
+                    <li>
+                        <div
+                            v-ripple
+                            v-styleclass="{
+                                selector: '@next',
+                                enterClass: 'hidden',
+                                enterActiveClass: 'slidedown',
+                                leaveToClass: 'hidden',
+                                leaveActiveClass: 'slideup'
+                            }"
+                            class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                        >
+                            <span class="font-medium">APPLICATION</span>
+                            <i class="pi pi-chevron-down"></i>
+                        </div>
+                        <ul class="list-none p-0 m-0 overflow-hidden">
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-folder mr-2"></i>
+                                    <span class="font-medium">Projects</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-chart-bar mr-2"></i>
+                                    <span class="font-medium">Performance</span>
+                                </a>
+                            </li>
+                            <li>
+                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                    <i class="pi pi-cog mr-2"></i>
+                                    <span class="font-medium">Settings</span>
+                                </a>
+                            </li>
+                        </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="mt-auto">
+                <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
+                <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                    <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
+                </a>
+            </div>
+        </div>
+    </template>
+</Sidebar>
+<Button icon="pi pi-bars" @click="visible = true" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-column h-full">
+                    <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                        <span class="inline-flex align-items-center gap-2">
+                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                    fill="var(--primary-color)"
+                                />
+                                <path
+                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                    fill="var(--text-color)"
+                                />
+                            </svg>
+                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                        </span>
+                        <span>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                        </span>
+                    </div>
+                    <div class="overflow-y-auto">
+                        <ul class="list-none p-3 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterClass: 'hidden',
+                                        enterActiveClass: 'slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'slideup'
+                                    }"
+                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">FAVORITES</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-home mr-2"></i>
+                                            <span class="font-medium">Dashboard</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-bookmark mr-2"></i>
+                                            <span class="font-medium">Bookmarks</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterClass: 'hidden',
+                                                enterActiveClass: 'slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'slideup'
+                                            }"
+                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Reports</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                            <li>
+                                                <a
+                                                    v-ripple
+                                                    v-styleclass="{
+                                                        selector: '@next',
+                                                        enterClass: 'hidden',
+                                                        enterActiveClass: 'slidedown',
+                                                        leaveToClass: 'hidden',
+                                                        leaveActiveClass: 'slideup'
+                                                    }"
+                                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                                >
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Revenue</span>
+                                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                                </a>
+                                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                    <li>
+                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-table mr-2"></i>
+                                                            <span class="font-medium">View</span>
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-search mr-2"></i>
+                                                            <span class="font-medium">Search</span>
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Expenses</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-users mr-2"></i>
+                                            <span class="font-medium">Team</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-comments mr-2"></i>
+                                            <span class="font-medium">Messages</span>
+                                            <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-calendar mr-2"></i>
+                                            <span class="font-medium">Calendar</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <ul class="list-none p-3 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterClass: 'hidden',
+                                        enterActiveClass: 'slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'slideup'
+                                    }"
+                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">APPLICATION</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-folder mr-2"></i>
+                                            <span class="font-medium">Projects</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-bar mr-2"></i>
+                                            <span class="font-medium">Performance</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mt-auto">
+                        <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
+                        <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <span class="font-bold">Amy Elsner</span>
+                        </a>
+                    </div>
+                </div>
+            </template>
+        </Sidebar>
+        <Button icon="pi pi-bars" @click="visible = true" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            visible: false
+        }
+    }
+}
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <Sidebar v-model:visible="visible">
+            <template #container="{ closeCallback }">
+                <div class="flex flex-column h-full">
+                    <div class="flex align-items-center justify-content-between px-4 pt-3 flex-shrink-0">
+                        <span class="inline-flex align-items-center gap-2">
+                            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M25.87 18.05L23.16 17.45L25.27 20.46V29.78L32.49 23.76V13.53L29.18 14.73L25.87 18.04V18.05ZM25.27 35.49L29.18 31.58V27.67L25.27 30.98V35.49ZM20.16 17.14H20.03H20.17H20.16ZM30.1 5.19L34.89 4.81L33.08 12.33L24.1 15.67L30.08 5.2L30.1 5.19ZM5.72 14.74L2.41 13.54V23.77L9.63 29.79V20.47L11.74 17.46L9.03 18.06L5.72 14.75V14.74ZM9.63 30.98L5.72 27.67V31.58L9.63 35.49V30.98ZM4.8 5.2L10.78 15.67L1.81 12.33L0 4.81L4.79 5.19L4.8 5.2ZM24.37 21.05V34.59L22.56 37.29L20.46 39.4H14.44L12.34 37.29L10.53 34.59V21.05L12.42 18.23L17.45 26.8L22.48 18.23L24.37 21.05ZM22.85 0L22.57 0.69L17.45 13.08L12.33 0.69L12.05 0H22.85Z"
+                                    fill="var(--primary-color)"
+                                />
+                                <path
+                                    d="M30.69 4.21L24.37 4.81L22.57 0.69L22.86 0H26.48L30.69 4.21ZM23.75 5.67L22.66 3.08L18.05 14.24V17.14H19.7H20.03H20.16H20.2L24.1 15.7L30.11 5.19L23.75 5.67ZM4.21002 4.21L10.53 4.81L12.33 0.69L12.05 0H8.43002L4.22002 4.21H4.21002ZM21.9 17.4L20.6 18.2H14.3L13 17.4L12.4 18.2L12.42 18.23L17.45 26.8L22.48 18.23L22.5 18.2L21.9 17.4ZM4.79002 5.19L10.8 15.7L14.7 17.14H14.74H15.2H16.85V14.24L12.24 3.09L11.15 5.68L4.79002 5.2V5.19Z"
+                                    fill="var(--text-color)"
+                                />
+                            </svg>
+                            <span class="font-semibold text-2xl text-primary">Your Logo</span>
+                        </span>
+                        <span>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-2rem w-2rem"></Button>
+                        </span>
+                    </div>
+                    <div class="overflow-y-auto">
+                        <ul class="list-none p-3 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterClass: 'hidden',
+                                        enterActiveClass: 'slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'slideup'
+                                    }"
+                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">FAVORITES</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-home mr-2"></i>
+                                            <span class="font-medium">Dashboard</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-bookmark mr-2"></i>
+                                            <span class="font-medium">Bookmarks</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a
+                                            v-ripple
+                                            v-styleclass="{
+                                                selector: '@next',
+                                                enterClass: 'hidden',
+                                                enterActiveClass: 'slidedown',
+                                                leaveToClass: 'hidden',
+                                                leaveActiveClass: 'slideup'
+                                            }"
+                                            class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                        >
+                                            <i class="pi pi-chart-line mr-2"></i>
+                                            <span class="font-medium">Reports</span>
+                                            <i class="pi pi-chevron-down ml-auto"></i>
+                                        </a>
+                                        <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                            <li>
+                                                <a
+                                                    v-ripple
+                                                    v-styleclass="{
+                                                        selector: '@next',
+                                                        enterClass: 'hidden',
+                                                        enterActiveClass: 'slidedown',
+                                                        leaveToClass: 'hidden',
+                                                        leaveActiveClass: 'slideup'
+                                                    }"
+                                                    class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple"
+                                                >
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Revenue</span>
+                                                    <i class="pi pi-chevron-down ml-auto"></i>
+                                                </a>
+                                                <ul class="list-none py-0 pl-3 pr-0 m-0 hidden overflow-y-hidden transition-all transition-duration-400 transition-ease-in-out">
+                                                    <li>
+                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-table mr-2"></i>
+                                                            <span class="font-medium">View</span>
+                                                        </a>
+                                                    </li>
+                                                    <li>
+                                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                            <i class="pi pi-search mr-2"></i>
+                                                            <span class="font-medium">Search</span>
+                                                        </a>
+                                                    </li>
+                                                </ul>
+                                            </li>
+                                            <li>
+                                                <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                                    <i class="pi pi-chart-line mr-2"></i>
+                                                    <span class="font-medium">Expenses</span>
+                                                </a>
+                                            </li>
+                                        </ul>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-users mr-2"></i>
+                                            <span class="font-medium">Team</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-comments mr-2"></i>
+                                            <span class="font-medium">Messages</span>
+                                            <span class="inline-flex align-items-center justify-content-center ml-auto bg-primary border-circle" style="min-width: 1.5rem; height: 1.5rem">3</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-calendar mr-2"></i>
+                                            <span class="font-medium">Calendar</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                        <ul class="list-none p-3 m-0">
+                            <li>
+                                <div
+                                    v-ripple
+                                    v-styleclass="{
+                                        selector: '@next',
+                                        enterClass: 'hidden',
+                                        enterActiveClass: 'slidedown',
+                                        leaveToClass: 'hidden',
+                                        leaveActiveClass: 'slideup'
+                                    }"
+                                    class="p-3 flex align-items-center justify-content-between text-600 cursor-pointer p-ripple"
+                                >
+                                    <span class="font-medium">APPLICATION</span>
+                                    <i class="pi pi-chevron-down"></i>
+                                </div>
+                                <ul class="list-none p-0 m-0 overflow-hidden">
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-folder mr-2"></i>
+                                            <span class="font-medium">Projects</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-chart-bar mr-2"></i>
+                                            <span class="font-medium">Performance</span>
+                                        </a>
+                                    </li>
+                                    <li>
+                                        <a v-ripple class="flex align-items-center cursor-pointer p-3 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                                            <i class="pi pi-cog mr-2"></i>
+                                            <span class="font-medium">Settings</span>
+                                        </a>
+                                    </li>
+                                </ul>
+                            </li>
+                        </ul>
+                    </div>
+                    <div class="mt-auto">
+                        <hr class="mb-3 mx-3 border-top-1 border-none surface-border" />
+                        <a v-ripple class="m-3 flex align-items-center cursor-pointer p-3 gap-2 border-round text-700 hover:surface-100 transition-duration-150 transition-colors p-ripple">
+                            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                            <span class="font-bold">Amy Elsner</span>
+                        </a>
+                    </div>
+                </div>
+            </template>
+        </Sidebar>
+        <Button icon="pi pi-bars" @click="visible = true" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const visible = ref(false);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/sidebar/PositionDoc.vue b/doc/sidebar/PositionDoc.vue
index 09c788dd2..af6b38587 100644
--- a/doc/sidebar/PositionDoc.vue
+++ b/doc/sidebar/PositionDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Sidebar location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as a value.</p>
+        <p>Sidebar location is configured with the <i>position</i> property that can take <i>left</i>, <i>right</i>, <i>top</i> and <i>bottom</i> as valid values.</p>
     </DocSectionText>
     <div class="card">
         <div class="flex gap-2 justify-content-center">
@@ -20,12 +20,12 @@
             <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">
+        <Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
             <h2>Top 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>
 
-        <Sidebar v-model:visible="visibleBottom" position="bottom">
+        <Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
             <h2>Bottom 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>
@@ -60,12 +60,12 @@ export default {
     <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">
+<Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
     <h2>Top 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>
 
-<Sidebar v-model:visible="visibleBottom" position="bottom">
+<Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
     <h2>Bottom 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>
@@ -90,12 +90,12 @@ export default {
             <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">
+        <Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
             <h2>Top 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>
 
-        <Sidebar v-model:visible="visibleBottom" position="bottom">
+        <Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
             <h2>Bottom 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>
@@ -135,12 +135,12 @@ export default {
             <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">
+        <Sidebar v-model:visible="visibleTop" position="top" style="height: auto">
             <h2>Top 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>
 
-        <Sidebar v-model:visible="visibleBottom" position="bottom">
+        <Sidebar v-model:visible="visibleBottom" position="bottom" style="height: auto">
             <h2>Bottom 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>
diff --git a/doc/sidebar/SizeDoc.vue b/doc/sidebar/SizeDoc.vue
index 01de209ea..8ba759063 100644
--- a/doc/sidebar/SizeDoc.vue
+++ b/doc/sidebar/SizeDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <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.</p>
+        <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">
diff --git a/doc/sidebar/TemplateDoc.vue b/doc/sidebar/TemplateDoc.vue
index 01dac1c14..b1ddd5a04 100644
--- a/doc/sidebar/TemplateDoc.vue
+++ b/doc/sidebar/TemplateDoc.vue
@@ -1,21 +1,23 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Additional content at the header section is provided using the <i>header</i> slot.</p>
+        <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">
-            <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
+            v-model:visible="visible"
+            :pt="{
+                header: {
+                    style: 'justify-content: space-between'
+                }
+            }"
+        >
             <template #header>
-                <div class="flex">
-                    <button class="p-sidebar-icon p-link mr-2">
-                        <span class="pi pi-print" />
-                    </button>
-                    <button class="p-sidebar-icon p-link mr-2">
-                        <span class="pi pi-search" />
-                    </button>
+                <div class="flex align-items-center gap-2 mr-auto">
+                    <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>
@@ -29,40 +31,42 @@ export default {
             visible: false,
             code: {
                 basic: `
-<div class="card flex justify-content-center">
-    <Sidebar v-model:visible="visible">
-        <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>
-        <template #header>
-            <div class="flex">
-                <button class="p-sidebar-icon p-link mr-2">
-                    <span class="pi pi-print" />
-                </button>
-                <button class="p-sidebar-icon p-link mr-2">
-                    <span class="pi pi-search" />
-                </button>
-            </div>
-        </template>
-    </Sidebar>
-    <Button icon="pi pi-plus" @click="visible = true" />
-</div>
+<Sidebar
+    v-model:visible="visible"
+    :pt="{
+        header: {
+            style: 'justify-content: space-between'
+        }
+    }"
+>
+    <template #header>
+        <div class="flex align-items-center gap-2 mr-auto">
+            <Avatar image="/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" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
-            <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
+            v-model:visible="visible"
+            :pt="{
+                header: {
+                    style: 'justify-content: space-between'
+                }
+            }"
+        >
             <template #header>
-                <div class="flex">
-                    <button class="p-sidebar-icon p-link mr-2">
-                        <span class="pi pi-print" />
-                    </button>
-                    <button class="p-sidebar-icon p-link mr-2">
-                        <span class="pi pi-search" />
-                    </button>
+                <div class="flex align-items-center gap-2 mr-auto">
+                    <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>
@@ -81,17 +85,19 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Sidebar v-model:visible="visible">
-            <h2>Sidebar</h2>
+        <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>
             <template #header>
-                <div class="flex">
-                    <button class="p-sidebar-icon p-link mr-2">
-                        <span class="pi pi-print" />
-                    </button>
-                    <button class="p-sidebar-icon p-link mr-2">
-                        <span class="pi pi-search" />
-                    </button>
+                <div class="flex align-items-center gap-2 mr-auto">
+                    <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
+                    <span class="font-bold">Amy Elsner</span>
                 </div>
             </template>
         </Sidebar>
diff --git a/pages/sidebar/index.vue b/pages/sidebar/index.vue
index 4ec48185f..ce33a008a 100755
--- a/pages/sidebar/index.vue
+++ b/pages/sidebar/index.vue
@@ -14,6 +14,7 @@
 import AccessibilityDoc from '@/doc/sidebar/AccessibilityDoc.vue';
 import BasicDoc from '@/doc/sidebar/BasicDoc.vue';
 import FullScreenDoc from '@/doc/sidebar/FullScreenDoc.vue';
+import HeadlessDoc from '@/doc/sidebar/HeadlessDoc.vue';
 import ImportDoc from '@/doc/sidebar/ImportDoc.vue';
 import PositionDoc from '@/doc/sidebar/PositionDoc.vue';
 import SizeDoc from '@/doc/sidebar/SizeDoc.vue';
@@ -55,6 +56,11 @@ export default {
                     label: 'Template',
                     component: TemplateDoc
                 },
+                {
+                    id: 'headless',
+                    label: 'Headless',
+                    component: HeadlessDoc
+                },
                 {
                     id: 'accessibility',
                     label: 'Accessibility',