Sidebar

Component, that realizes navigation between app pages.

Sidebar is composed of 2 components:

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

app-sidebar

<app-sidebar :isOpen="opened" @toggle-menu="toggleSidebar"/>

Props

• isOpen - Boolean - defines default open|closed state of sidebar. prop is bound bidirectionaly (component will emit changes by clicking selector icon).

Events

• toggle-menu - changes state of sidebar.

va-sidebar

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

Props

• hidden - Boolean - defines if sidebar is opened or no.

Slots

• menu - set of sidebar links.

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

sidebar-link

Wrapper on router link, with 'title' slot for title and icon.

<sidebar-link :to="{ name: 'dashboard' }">
  <span slot="title">
     <span class="sidebar-menu-item-icon vuestic-icon vuestic-icon-dashboard"></span>
     <span>{{ $t('menu.dashboard') }}</span>
  </span>
</sidebar-link>

Props

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

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.

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

<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',
        },
      ],
    }
  }
  // ...
}