Sidebar

Component, that realizes navigation between app pages.

Components

• app-sidebar - contains sidebar functionality.
• va-sidebar - contains sidebar view and necessary styles.
• sidebar-link-group
• sidebar-link

app-sidebar

<app-sidebar :minimized="true"/>

Props

• minimized - Boolean.

va-sidebar

<va-sidebar :hidden="isOpen">
  <template slot="menu"> ... </template>
</va-sidebar>

Props

• minimized - Boolean.
• color - String (default: 'secondary').

Slots

• menu - set of sidebar links.

There are two types of components, that can be inserted in 'menu' slot: Sidebar is composed of 2 components:

• sidebar-link - wrapper on router link, with 'title' slot for title and icon.
• sidebar-link-group - wrapper with 'title' slot for title and icon and default slot for sidebar links. Used in cases, when sidebar links can be grouped in category.

sidebar-link

<sidebar-link :to="{ name: 'dashboard' }">
  <span slot="title">
     <span class="sidebar-menu-item-icon vuestic-icon vuestic-icon-dashboard"></span>
     <span>Dashboard</span>
  </span>
</sidebar-link>

Props

• to - Object | String.
• target - String (default: '_self').
• icon - String | Array.
• title - String.
• activeByDefault - Boolean.
• minimized - Boolean.

If you want to add icon into submenu, just choose necessary sidebar-link and insert suitable icon into its 'title' slot.

sidebar-link-group

<sidebar-link-group
  :minimized="true"
  :icon="['sidebar-menu-item-icon vuestic-iconset vuestic-iconset-statistics']"
  title="Statistics"
  :children="children"
>
  <!-- sidebar-link items here -->     
</sidebar-link-group>

export default {
  data () {
    return {
      children: [
        {
          name: 'charts',
          displayName: 'Charts',
        },
        {
          name: 'progress-bars',
          displayName: 'Progress Bars',
        },
      ],
    }
  }
  // ...
}

Props

• icon - String | Array.
• title - String.
• minimized - Boolean.
• activeByDefault - Boolean.
• children - Array.
• color - String (default: 'secondary').