PersonaSidebar
Base dashboard sidebar menu
Usage
Basic 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 variant for layer-ordering component.
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
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
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
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
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
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
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
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
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
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.
Please resize the browser to see the demo works.
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>Toggleable just work in sidebar fixed
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
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-y: theme(spacing.4);.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
| Name | Arguments | Description |
|---|---|---|
| There no event here | ||