Sidebar

Base dashboard sidebar menu

Usage

Basic Sidebar

• Documents
• Contacts
• Structure

preview

<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.

• Documents
• Contacts
• Structure

preview

<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

• Documents
• Contacts
• Structure

preview

<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.

• Documents
• Contacts
• Structure

preview

<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

<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

• Docs
• Users
• Struct

preview

<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>

• ENG

preview

<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

• Dashboard
• Documents
  • Need Action
  • In Progress
  • Others

preview

<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

• Dashboard
• Documents
  • Need Action
  • In Progress
  • Others

preview

<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

See More

• See More
• Dashboard
• Documents

preview

<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>.

main

• main
• Dashboard
• Documents
  • Need Action
  • In Progress
  • Others

preview

<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.

Toggle Sidebar just works in under lg screen

Mainlabel

• Mainlabel
• Documents
• Contacts
• Structure
• Documents
  • Need Action
  • In Progress
  • Others

preview

<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.

Toggle Sidebar works in all screen

preview

<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

--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

--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