Sidebar

Component, that realizes navigation between app pages.

Sidebar is composed of 2 components:

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

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

<vuestic-sidebar :hidden="isOpen">
    <template slot="menu"> ... </template>
</vuestic-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-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.