vueture-hamburger

A Vueture plugin, contains a hamburger/close button and (mobile) side navigation.

Installation

Install the plugin by NPM:

$ npm install vueture-hamburger

Open src/bootstrap.js and let vue know about vueture-hamburger:

Vue.use(require('vueture-hamburger'), { store });

Important: Be sure to pass the store object in the options. vueture-hamburgers will automatically add a vueture-hamburger store module to your app.

Basic usage

Once installed you can use these components in your app:

<vueture-hamburger-icon></vueture-hamburger-icon>

<vueture-hamburger-nav>
  This is a sidebar which can be toggled by vueture-hamburger-icon.
</vueture-hamburger-nav>

vueture-hamburger-icon

A hamburger icon which toggles the visibility of vueture-hamburger-nav. It has an is-open state which is stored in the Vuex store of the app.

vueture-hamburger-nav

A (mobile) side navigation. It has an is-open state which is stored in the Vuex store of the app.

option | description | options | default ------ | ----------- | ------- | ------- position | The position of the sidebar. | left right | left keys | Pressing / key will open the side navigation. Pressing esc key will close the side navigation. | Boolean | true scrollable | Adds an IScroll instance to the side navigation. This will show a scrollbar when the content is longer than its parent. Boolean | true on-enter | Custom enter animation when side navigations opens. | Function | enter on-leave | Custom leave animation when side navigations closes. | Function | leave

Customize

vueture-hamburger should cover most of your implementation needs. If you have any suggestions feel free to do a pull request or post an issue with your ideas.

vueture-hamburger-icon

If you want to have a custom hamburger icon, for example an SVG icon, just add your own element:

<vueture-hamburger-icon>
  <svg class="my-custom-button"></svg>
</vueture-hamburger-icon>

Clicking the component will toggle the is-open css class. This way you can style the close state easily:

.my-custom-button {
  /* Default state */
}

.my-custom-button:hover {
  /* Hover state */
}

.is-open .my-custom-button {
  /* Open state */
}

vueture-hamburger-nav

By default the vueture-hamburger-nav will slide in on open and slide out on close. However it is also possible to add your own transitions. Just pass the onEnter/onLeave params:

<vueture-hamburger-nav onEnter="customEnter" onLeave="customLeave">
  <p>Your content here</p>
</vueture-hamburger-nav>

And in your component:

methods: {
  customEnter(el, done) {
    // el contains the components wrapper
    // be sure to call done() when the transition is completed.

    // Your custom enter animation...

    done();
  },

  customLeave(el, done) {
    // el contains the components wrapper
    // be sure to call done() when the transition is completed.

    // Your custom leave animation...

    done();
  }
}

Store

Getters

this.$store.getters.isHamburgerOpen; // Returns true or false

Actions

// Toggle vueture-hamburger-nav
this.$store.dispatch('toggleHamburger');

// Open vueture-hamburger-nav
this.$store.dispatch('openHamburger');

// Close vueture-hamburger-nav
this.$store.dispatch('closeHamburger');

License

The MIT License (MIT)

Copyright (c) 2016 Vueture

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.