Emit 'collapse' event from Navbar Component

Note: We are using v2 branch. In order to use a transforming hamburger button with the mobile navbar, we need to have an event emitted from the Navbar component so that we can change the hamburger back to original state. Here is an example of the component code:

<template>
  <navbar placement="top" v-on:collapse="collapse">
    <button slot="collapse" type="button" class="navbar-toggle" :class="{ 'collapsed': collapsed }" @click="toggleCollapse" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="sr-only">Toggle navigation</span>
      <span class="fa" :class="collapsed ? 'fa-bars' : 'fa-times'"></span>
    </button>
    <router-link slot="brand" class="navbar-brand" to="/">
      Brand
    </router-link>
    <router-link :to="{ name: 'products' }"><i class="fa fa-fw fa-list-ul"></i> Product List</router-link></li>
  </navbar>
</template>

<script>
import { navbar, dropdown } from 'vue-strap';

export default {
  name: 'navigation-bar',
  data: function data() {
    return {
      collapsed: true,
    };
  },
  components: {
    navbar,
    dropdown,
  },
  methods: {
    toggleCollapse() {
      this.collapsed = !this.collapsed;
    },
    collapse() {
      this.collapsed = true;
    },
  },
};
</script>

We've created this functionality in a forked repository and are using it successfully. Would you be open to a pull request to get this integrated into the v2 branch?

Here is the snippet involved:

// Navbar.vue
    $(this.$el).on('click touchstart','li:not(.dropdown)>a', e => {
      setTimeout(() => { this.collapsed = true; this.$emit('collapse'); }, 200)
    }).onBlur(e => {
      if (!this.$el.contains(e.target)) { this.collapsed = true; this.$emit('collapse'); }
    })

yuche / vue-strap

Emit 'collapse' event from Navbar Component #487