Skip to content

Sidebar

Jump to bottom
Sanya Boriskin edited this page Aug 5, 2019 · 25 revisions

Component, that realizes navigation between app pages.

Sidebar is composed of 2 components:

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

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-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').
Clone this wiki locally