Vue.js slideout sidebar

Note: please do not use for production. It is incomplete and will be have several sever updates.

Installation

npm install --save vue-another-sidebar

Usage

//app.js

...
import { Sidebar, SidebarTrigger } from 'vue-another-sidebar';
...

const app = new Vue({
    store,
    ...
    components: {
        ...
        Sidebar,
        SidebarTrigger
    }
}).$mount('#app')

<!-- app.html -->
...
<div id="app">    
    <sidebar off-canvas></sidebar>
    <div class="content off-canvas">
        ...
        <sidebar-trigger></sidebar-trigger>
        ...
    </div>
</div>

Components in the bundle

• Sidebar: main component to display slideout sidebar
• SidebarTrigger: a button to show/hide sidebar

External dependencies

• vuex to store show/hide state
• invert-color a ui helper to keep color of closer icon (x) contrast to sidebar background

Sidebar component options

• width: sidebar width (px). Default: 220
• bgcolor: sidebar background color. Default: #EEEEEE
• speed: transition speed. Default: 0.3
• right: show from the right. Default: false
• close-size: close icon font size. Close icon represented by html × symbol. Default: 60
• off-canvas: shift content on show. Shifted content must have 'off-canvas' class. Default: false