Sidebar Menu ​

<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 '@carbon/icons-vue/lib/dashboard/20'
import IconDocument from '@carbon/icons-vue/lib/document/20'
import IconUsers from '@carbon/icons-vue/lib/group/20'

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>

<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 '@carbon/icons-vue/lib/dashboard/20'
import IconDocument from '@carbon/icons-vue/lib/document/20'
import IconUsers from '@carbon/icons-vue/lib/group/20'
import IconSettings from '@carbon/icons-vue/lib/settings--adjust/20'

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>

<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 '@carbon/icons-vue/lib/dashboard/20'
import IconDocument from '@carbon/icons-vue/lib/document/20'
import IconUsers from '@carbon/icons-vue/lib/group/20'
import IconSettings from '@carbon/icons-vue/lib/settings--adjust/20'

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>