@privyid/persona 1.2.0 → 1.2.1-rc.0

package/dist/components/sidebar/index.md

@@ -1,890 +0,0 @@
----
-title: Sidebar · Components
-description: Base dashboard sidebar menu.
----
-
-<script setup>
-  import pSidebar from './Sidebar.vue'
-  import pSidebarNav from './SidebarNav.vue'
-  import pSidebarBrand from './SidebarBrand.vue'
-  import pNavItem from '../nav/NavItem.vue'
-  import pNavSubItem from '../nav/NavSubItem.vue'
-  import pCheckbox from '../checkbox/Checkbox.vue'
-  import pBanner from '../banner/Banner.vue'
-  import pCard from '../card/Card.vue'
-  import pCaption from '../caption/Caption.vue'
-  import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
-  import IconGroup from '@privyid/persona-icon/vue/user-multiple/20.vue'
-  import IconDataStructured from '@privyid/persona-icon/vue/employee-tree/20.vue'
-  import IconSettings from '@privyid/persona-icon/vue/settings/20.vue'
-  import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
-  import IconCheck from '@privyid/persona-icon/vue/checkmark/20.vue'
-  import IconClose from '@privyid/persona-icon/vue/close/20.vue'
-  import { ref } from "vue-demi"
-
-  const model   = ref(false)
-  const modelA  = ref(false)
-</script>
-
-<style scoped>
-  .preview {
-    @apply block h-96 overflow-hidden;
-
-    &--fixed {
-      .sidebar {
-        --p-sidebar-z-index: 15;
-      }
-
-      .sidebar--fixed {
-        @apply absolute;
-      }
-    }
-  }
-</style>
-
-# Sidebar
-
-> Base dashboard sidebar menu
-
-## Usage
-
-### Basic Sidebar
-
-<preview class="preview--fixed">
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-### Fixed Sidebar
-Fixed sidebar are using z-fixed for z-index value. It posible to change z-index value using `--p-sidebar-z-index` CSS variable. But don't forget to see the all [z-index](/foundation/variables/#z-index) variant for layer-ordering component.
-<preview class="preview--fixed">
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-## Alignment
-To align Sidebar, use align prop. Available value are `left` and `right`
-<preview class="preview--fixed">
-<p-sidebar fixed align="right">
-  <template #brand>
-    <p-sidebar-brand>
-      <img src="/assets/images/logo-privy.svg" alt="" />
-    </p-sidebar-brand>
-  </template>
-  <p-sidebar-nav>
-    <p-nav-item active>Documents</p-nav-item>
-    <p-nav-item>Contacts</p-nav-item>
-    <p-nav-item>Structure</p-nav-item>
-  </p-sidebar-nav>
-</p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed align="right">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-## Condensed
-When you need less space/padding of sidebar navigation, you can set by using `condensed` prop.
-
-<preview class="preview--fixed">
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav condensed>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav condensed>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-## Types
-Sidebar has 2 types, `wide` and `narrow`. Default is `wide`. In variant `narrow`, you can place your navigation with icon-only or icon-label.
-
-### Icon Only
-<preview class="preview--fixed">
-  <p-sidebar fixed type="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDocument />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconGroup />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDataStructured />
-        </template>
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed variant="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDocument />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDocument />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDataStructured />
-        </template>
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-### Icon with Label
-
-<preview class="preview--fixed">
-  <p-sidebar fixed type="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDocument />
-        </template>
-        Docs
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconGroup />
-        </template>
-        Users
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDataStructured />
-        </template>
-        Struct
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed type="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDocument />
-        </template>
-        Docs
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconGroup />
-        </template>
-        Users
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDataStructured />
-        </template>
-        Struct
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-### Bottom Menus
-
-If you need to place menus in the bottom, you just add `bottom` prop in your `<p-sidebar-nav>`
-
-<preview class="preview--fixed">
-  <p-sidebar fixed type="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav bottom>
-      <p-nav-item active>
-        <template #icon>
-          <IconSettings />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <img src="/assets/images/icon-flag.svg"/>
-        </template>
-        ENG
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed type="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav bottom>
-      <p-nav-item active>
-        <template #icon>
-          <IconSettings />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <img src="/assets/images/icon-flag.svg"/>
-        </template>
-        ENG
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-## Submenu
-Submenu just works in `wide` type. If you need collapsible menus, you just add `collapsible` prop in your `<p-nav-sub-item>`
-
-### Default Submenu
-
-<preview class="preview--fixed">
-<p-sidebar fixed>
-  <template #brand>
-    <p-sidebar-brand>
-      <img src="/assets/images/logo-privy.svg" alt="" />
-    </p-sidebar-brand>
-  </template>
-  <p-sidebar-nav>
-    <p-nav-item active>
-      <template #icon>
-        <IconDashboard />
-      </template>
-      Dashboard
-    </p-nav-item>
-    <p-nav-sub-item text="Documents">
-      <template #icon>
-        <IconDocument />
-      </template>
-      <p-sidebar-nav>
-        <p-nav-item>
-          Need Action
-        </p-nav-item>
-        <p-nav-item>
-          In Progress
-        </p-nav-item>
-        <p-nav-item>
-          Others
-        </p-nav-item>
-      </p-sidebar-nav>
-    </p-nav-sub-item>
-  </p-sidebar-nav>
-</p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDashboard />
-        </template>
-        Dashboard
-      </p-nav-item>
-      <p-nav-sub-item text="Documents">
-        <template #icon>
-          <IconDocument />
-        </template>
-        <p-sidebar-nav>
-          <p-nav-item>
-            Need Action
-          </p-nav-item>
-          <p-nav-item>
-            In Progress
-          </p-nav-item>
-          <p-nav-item>
-            Others
-          </p-nav-item>
-        </p-sidebar-nav>
-      </p-nav-sub-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-### Collapsible Menus
-
-<preview class="preview--fixed">
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDashboard />
-        </template>
-        Dashboard
-      </p-nav-item>
-      <p-nav-sub-item text="Documents" collapsible>
-        <template #icon>
-          <IconDocument />
-        </template>
-        <p-sidebar-nav>
-          <p-nav-item>
-            Need Action
-          </p-nav-item>
-          <p-nav-item>
-            In Progress
-          </p-nav-item>
-          <p-nav-item>
-            Others
-          </p-nav-item>
-        </p-sidebar-nav>
-      </p-nav-sub-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDashboard />
-        </template>
-        Dashboard
-      </p-nav-item>
-      <p-nav-sub-item text="Documents" collapsible>
-        <template #icon>
-          <IconDocument />
-        </template>
-        <p-sidebar-nav>
-          <p-nav-item>
-            Need Action
-          </p-nav-item>
-          <p-nav-item>
-            In Progress
-          </p-nav-item>
-          <p-nav-item>
-            Others
-          </p-nav-item>
-        </p-sidebar-nav>
-      </p-nav-sub-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-## Grouped Menu
-Grouped menu in the sidebar can be implemented by adding section-title via `title` props in your `<p-sidebar-nav>`.
-Action-permalink can also be added to the section-title via `title-action-label` & `title-action-url`.
-
-### Action
-<preview class="preview--fixed">
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav
-      title-action-label="See More"
-      title-action-url="#/categories">
-      <p-nav-item active>
-        <template #icon>
-          <IconDashboard />
-        </template>
-        Dashboard
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDocument />
-        </template>
-        Documents
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav
-      title="main"
-      title-action-label="See More"
-      title-action-url="#/categories">
-      <p-nav-item active>
-        <template #icon>
-          <IconDashboard />
-        </template>
-        Dashboard
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDocument />
-        </template>
-        Documents
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-### Collapsible
-If you want collapsible grouped menus, you just need to add `collapsible` props in your `<p-sidebar-nav>`.
-
-<preview class="preview--fixed">
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav
-      title="main"
-      collapsible>
-      <p-nav-item active>
-        <template #icon>
-          <IconDashboard />
-        </template>
-        Dashboard
-      </p-nav-item>
-      <p-nav-sub-item text="Documents" collapsible>
-        <template #icon>
-          <IconDocument />
-        </template>
-        <p-sidebar-nav>
-          <p-nav-item>
-            Need Action
-          </p-nav-item>
-          <p-nav-item>
-            In Progress
-          </p-nav-item>
-          <p-nav-item>
-            Others
-          </p-nav-item>
-        </p-sidebar-nav>
-      </p-nav-sub-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav
-      title="main"
-      collapsible>
-      <p-nav-item active>
-        <template #icon>
-          <IconDashboard />
-        </template>
-        Dashboard
-      </p-nav-item>
-      <p-nav-sub-item text="Documents" collapsible>
-        <template #icon>
-          <IconDocument />
-        </template>
-        <p-sidebar-nav>
-          <p-nav-item>
-            Need Action
-          </p-nav-item>
-          <p-nav-item>
-            In Progress
-          </p-nav-item>
-          <p-nav-item>
-            Others
-          </p-nav-item>
-        </p-sidebar-nav>
-      </p-nav-sub-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-## Toggleable
-Toggleable-feature can be used for responsive purpose. It can be toggle the sidebar via `toggleable` props. It also can toggle-hide or toggle-show automatically if certain breakpoint condition have been met. There are at least 4 breakpoints available: `all`, `lg`, `md` and `sm`.
-
-<p-banner :dismissable="false">
-  Please resize the browser to see
-  the demo works.
-</p-banner>
-
-<preview class="preview--fixed">
-  <div class="flex justify-end">
-    <p-checkbox appearance="none" v-model="model">
-      <template #default>
-        <p-card
-          element="div"
-          class="p-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <div>
-              Toggle Sidebar <IconCheck class="inline text-info" v-if="model" /> <IconClose class="inline text-danger" v-else />
-              <p-caption>just works in under lg screen</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-  </div>
-  <p-sidebar v-model="model" toggleable="lg" fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav title="Main" title-action-label="label" title-action-url="/url" collapsible>
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-      <p-nav-sub-item text="Documents" collapsible>
-        <template #icon>
-          <IconDocument />
-        </template>
-        <p-sidebar-nav id="chld-1">
-          <p-nav-item>
-            Need Action
-          </p-nav-item>
-          <p-nav-item>
-            In Progress
-          </p-nav-item>
-          <p-nav-item>
-            Others
-          </p-nav-item>
-        </p-sidebar-nav>
-      </p-nav-sub-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar v-model="model" toggleable="lg" fixed>
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav title="Main">
-      <p-nav-item active>Documents</p-nav-item>
-      <p-nav-item>Contacts</p-nav-item>
-      <p-nav-item>Structure</p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-<p-banner variant="danger" :dismissable="false">
-  <strong>Toggleable</strong> just work in sidebar fixed
-</p-banner>
-
-It's possible to make sidebar toggle-hide by default to make fullwidth page with no-sidebar. Just give `all` value in `toggleable` props.
-<preview class="preview--fixed">
-  <div class="flex justify-end">
-    <p-checkbox appearance="none" v-model="modelA">
-      <template #default>
-        <p-card
-          element="div"
-          class="p-2 hover:shadow-md hover:border-subtle ease-in-out duration-200 min-w-[223px]"
-          sectioned>
-          <div class="flex items-center space-x-3">
-            <div>
-              Toggle Sidebar <IconCheck class="inline text-info" v-if="modelA" /> <IconClose class="inline text-danger" v-else />
-              <p-caption>works in all screen</p-caption>
-            </div>
-          </div>
-        </p-card>
-      </template>
-    </p-checkbox>
-  </div>
-  <p-sidebar v-model="modelA" toggleable="all" fixed type="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDocument />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconGroup />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDataStructured />
-        </template>
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</preview>
-
-```vue
-<template>
-  <p-sidebar v-model="model" toggleable="all" fixed type="narrow">
-    <template #brand>
-      <p-sidebar-brand>
-        <img src="/assets/images/logo-privy-icon.svg" alt="" />
-      </p-sidebar-brand>
-    </template>
-    <p-sidebar-nav>
-      <p-nav-item active>
-        <template #icon>
-          <IconDocument />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconGroup />
-        </template>
-      </p-nav-item>
-      <p-nav-item>
-        <template #icon>
-          <IconDataStructured />
-        </template>
-      </p-nav-item>
-    </p-sidebar-nav>
-  </p-sidebar>
-</template>
-```
-
-## Variables
-Sidebar use local CSS variables for enhanced real-time customization.
-
-### `.sidebar`
-```sass
---p-sidebar-size-narrow: 60px;
---p-sidebar-size-wide: 230px;
---p-sidebar-bg: theme(backgroundColor.DEFAULT);
---p-sidebar-bg-dark: theme(backgroundColor.dark.DEFAULT);
---p-sidebar-z-index: theme(zIndex.fixed);
---p-sidebar-sticky-top: theme(spacing.0);
---p-sidebar-padding-x: theme(spacing.2);
---p-sidebar-padding-left: var(--p-sidebar-padding-x);
---p-sidebar-padding-right: var(--p-sidebar-padding-x);
---p-sidebar-padding-y: theme(spacing.4);
---p-sidebar-padding-top: var(--p-sidebar-padding-y);
---p-sidebar-padding-bottom: var(--p-sidebar-padding-y);
---p-sidebar-shadow: theme(boxShadow.lg);
-```
-
-### `.sidebar__brand`
-
-```sass
---p-sidebar-brand-sticky-top: 0;
-```
-
-## API
-
-### Props `<p-sidebar>`
-
-| Props          |   Type    | Default     | Description                                                       |
-|----------------|:---------:|:-----------:|-------------------------------------------------------------------|
-| `variant`      | `String`  | `pills`     | Sidebar variant, valid value is `pills`, `lines` and `tabs`       |
-| `align`        | `String`  | `left`      | Sidebar alignment, valid value is `left` and `right`              |
-| `type`         | `String`  | `wide`      | Sidebar type, valid value is `wide` and `narrow`                  |
-| `fixed`        | `Boolean` | `false`     | Activate fixed Sidebar                                            |
-| `sticky`       | `Boolean` | `false`     | Activate sticky Sidebar                                           |
-| `toggleable`   | `String`  | `-`         | Toggle with desired breakpoint `lg`, `md`, `sm` and `all`         |
-
-### Slots `<p-sidebar>`
-
-| Name             | Description                                             |
-|------------------|---------------------------------------------------------|
-| `default`        | Content to place in the Sidebar                         |
-| `brand`          | Content to place in the Sidebar Brand                   |
-| `bottom`         | Content to place in the Sidebar bottom                   |
-
-### Props `<p-sidebar-brand>`
-
-| Props          |   Type    | Default     | Description                                                       |
-|----------------|:---------:|:-----------:|-------------------------------------------------------------------|
-| `href`         | `String`  | `undefined` | Target URL of the Sidebar Brand link                              |
-| `fixed`        | `Boolean` | `false`     | Make position of sidebar brand fixed on top                       |
-| `sticky`       | `Boolean` | `false`     | Make position of sidebar brand sticky on top                      |
-
-### Slots `<p-sidebar-brand>`
-
-| Name             | Description                                             |
-|------------------|---------------------------------------------------------|
-| `default`        | Content to place in the Sidebar Brand                   |
-
-### Props `<p-sidebar-nav>`
-
-| Props          |   Type    | Default     | Description                                                       |
-|----------------------|:---------:|:-----------:|-------------------------------------------------------------------|
-| `title`              | `String`  | `undefined` | Title to place in the top of sidebar navigation block             |
-| `title-action-label` | `String`  | `undefined` | Title action label to place in the section title                  |
-| `title-action-url`   | `String`  | `undefined` | Title action url to place in the section title                    |
-| `bottom`             | `Boolean` | `false`     | Place group of sidebar navigation in the bottom of Sidebar        |
-| `condensed`          | `Boolean` | `false`     | Activate condensed of group navigation with less space            |
-| `collapsible`        | `Boolean` | `false`     | Activate collapsible navigation from section title                |
-
-### Slots `<p-sidebar-nav>`
-
-| Name             | Description                                             |
-|------------------|---------------------------------------------------------|
-| `default`        | Content to place in the Sidebar Nav                     |
-
-### Events
-
-<table>
-  <thead>
-    <tr>
-      <th>Name</th>
-      <th>Arguments</th>
-      <th>Description</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td colspan="3" class="text-center">There no event here</td>
-    </tr>
-  </tbody>
-</table>