Skip to content

Sidebar Menu

Define sidebar using JSON

Usage

Basic Sidebar

vue
<template>
  <p-sidebar-menu :menus="menus">
    <p-sidebar-brand>
      <img src="/assets/images/logo-privy.svg" alt="" />
    </p-sidebar-brand>
  </p-sidebar-menu>
</template>

<script setup>
import { defineMenu } from '@privyid/persona/core'
import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'

const menus = defineMenu([
  {
    items: [
      {
        name : 'dashboard',
        label: 'Dashboard',
        url  : '/',
        icon : IconDashboard
      },
      {
        name : 'documents',
        label: 'Documents',
        url  : '/',
        icon : IconDocument
      },
      {
        name : 'contacts',
        label: 'Contacts',
        url  : '/',
        icon : IconUsers
      }
    ]
  },
])
</script>

Fixed Sidebar

vue
<template>
  <p-sidebar-menu fixed :menus="menus">
    <p-sidebar-brand>
      <img src="/assets/images/logo-privy.svg" alt="" />
    </p-sidebar-brand>
  </p-sidebar-menu>
</template>

<script setup>
import { defineMenu } from '@privyid/persona/core'
import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'
import IconSettings from '@privyid/persona-icon/vue/adjust/20.vue'

const menus = defineMenu([
  {
    items: [
      {
        name : 'dashboard',
        label: 'Dashboard',
        url  : '/',
        icon : IconDashboard,
      },
      {
        name       : 'document',
        label      : 'Documents',
        url        : '/',
        icon       : IconDocument,
        collapsible: true,
        submenu    : [
          {
            name : 'need-action',
            label: 'Need Action',
            url  : '/'
          },
          {
            name : 'in-progress',
            label: 'In Progress',
            url  : '/'
          },
          {
            name : 'others',
            label: 'Others',
            url  : '/'
          }
        ]
      },
      {
        name : 'contact',
        label: 'Contacts',
        url  : '/',
        icon : IconUsers
      }
    ]
  },
  {
    condensed: true,
    title    : 'Quick Jump',
    items    : [
      {
        name : 'rejects',
        label: 'Rejects',
        url  : '/',
      },
      {
        name : 'archives',
        label: 'Archives',
        url  : '/',
      },
    ]
  },
  {
    bottom: true,
    items: [
      {
        name : 'settings',
        label: 'Settings',
        icon : IconSettings,
        url  : '/',
      },
      {
        name : 'english',
        label: 'English',
        url  : '/',
        icon : './assets/images/img-flag.svg'
      },
    ]
  },
])
</script>

Narrow Sidebar

vue
<template>
  <p-sidebar-menu fixed :menus="menus" type="narrow">
    <p-sidebar-brand>
      <img src="/assets/images/logo-privy-icon.svg" alt="" />
    </p-sidebar-brand>
  </p-sidebar-menu>
</template>

<script setup>
import { defineMenu } from '@privyid/persona/core'
import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'
import IconSettings from '@privyid/persona-icon/vue/adjust/20.vue'

const menus = defineMenu([
  {
    items: [
      {
        name: 'dashboard',
        url : '/',
        icon: IconDashboard
      },
      {
        name: 'document',
        url : '/',
        icon: IconDocument
      },
      {
        name: 'users',
        url : '/',
        icon: IconUsers
      }
    ]
  },
  {
    bottom: true,
    items: [
      {
        name: 'settings',
        url : '/',
        icon: IconSettings
      },
      {
        name : 'language',
        label: 'ENG',
        url  : '/',
        icon : '/assets/images/img-flag.svg'
      }
    ]
  }
])
</script>

Limiting Menus

Limiting how much menu-item would be displayed is possible by setup it from maxLength.

vue
<template>
  <p-sidebar-menu fixed :menus="menus">
    <p-sidebar-brand>
      <img src="/assets/images/logo-privy-icon.svg" alt="" />
    </p-sidebar-brand>
  </p-sidebar-menu>
</template>

<script setup>
import { defineMenu } from '@privyid/persona/core'
import IconDashboard from '@privyid/persona-icon/vue/dashboard/20.vue'
import IconDocument from '@privyid/persona-icon/vue/document-filled/20.vue'
import IconUsers from '@privyid/persona-icon/vue/user-groups/20.vue'

const limit = defineMenu([
  {
    maxLength: 2,
    items: [
      {
        name : 'dashboard',
        label: 'Dashboard',
        url  : '/',
        icon : IconDashboard,
      },
      {
        name: 'document',
        label: 'Documents',
        url: '/',
        icon: IconDocument,
      },
      {
        name : 'contact',
        label: 'Contacts',
        url  : '/',
        icon : IconUsers
      },
      {
        name : 'rejects',
        label: 'Rejects',
        url  : '/',
      },
      {
        name: 'archives',
        label: 'Archives',
        url: '/',
      },
    ]
  },
])
</script>

API

Props

PropsTypeDefaultDescription
alignStringleftSidebar alignment, valid value is left and right
typeStringwideSidebar type, valid value is wide and narrow
fixedBooleanfalseActivate fixed Sidebar
menusArray-Menu items
showMoreTextStringMoreText for show more's button
showLessTextStringLessText for show less's button

Slots

NameDescription
defaultContent to place Sidebar Brand
bottomContent to place in the Sidebar bottom

Events

NameArgumentsDescription
There no event here

Released under the MIT License.