vue-side-nav

for the best user-experience when navigating your side, you can use a responsive side-nav.

Demo

Install

npm install --save-dev vue-side-nav
// vue touch@next - not released on npm currently
npm install --save-dev git://github.com/vuejs/vue-touch.git#next

// [email protected]
npm install --save-dev vue-side-nav@1 vue-touch@1

or include build/bundle.js.

Usage

# somewhere
Vue.use(require('vue-touch'))

# in your component
components:
  "side-nav": require("vue-side-nav")
# or, when using bundle.js
components:
  "side-nav": window.vueComps.sideNav

<side-nav>
  <li>First Text<li>
</side-nav>
<!-- sibling elements will be set to margin-left:240px for `fixed` and `is-fixed=true` -->
<container>
</container>

For examples see dev/.

Props

Name | type | default | description ---:| --- | ---| --- width | Number | 240 | width of the side-nav fixed-screen-size | Number | 992 | Used with fixed. Above this size, the menu will stay opened. not-dismissable | Boolean | false | A click on the overlay will not dismiss it close-on-click | Boolean | false | Any click within the side-nav will close it fixed | Boolean | false | should always show on large screens is-opened | Boolean | false | opens or closes the side-nav - use in conjuction with toggled event right | Boolean | false | attach to the right side instead of the left transition | Function | no-transition | will be called on open and close with {el,style,cb}. class | vue class | ["side-nav"] | class of the ul style | vue style | [] | style of the ul id | String | - | id of the ul opacity | Number | 0.5 | opacity of the overlay z-index | Number | 1000 | minimum zIndex of the overlay, cannot be lower than 100 (see vue-overlay for specifics)

Menu will be visibile when either is-fixed or is-opened is true.

Events

Name | description ---:| --- before-enter | will be called before open animation after-enter | will be called when opened before-leave | will be called before close animation after-leave | will be called when closed fixed(isFixed:Boolean) | emitted when menu get fixed or unfixed on large screen. toggled(isOpened:Boolean) | emitted when menu gets opened or closed.

Transition

You can provide a transition like this:

Velocity = require("velocity-animate")

template: "<side-nav transition='moveIn'></side-nav>",
methods:{
  moveIn: function ({el,style,cb}) {
    Velocity el, "stop"
    Velocity el, style, {
      duration: 300,
      queue: false,
      easing: 'easeOutQuad',
      complete: cb
    }
  }
}

The background is managed by vue-overlay. See here for an example on how to change its fading function.

Changelog

• 2.0.0
  now compatible with vue 2.0.0
  close overlay on destroy

• 1.1.0
  events are renamed after vue transitions
  added toggled event

• 1.0.1
  added z-index prop

• 1.0.0
  renamed hide-on-screen-size to fixed-screen-size

• 0.3.0
  renamed not-dismissible to not-dismissable. added close-on-click

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.