Vue.component('nav-bar', {
	template: `
		<nav class="navbar" role="navigation" aria-label="main navigation">
          <div class="navbar-brand">
            <a class="navbar-item" href="https://bulma.io">
              <img src="/assets/logoMPS.png" height="28">
            </a>
            <p style="margin:0 auto" class="navbar-item"><slot name="subpedido"></slot></p>
            <a role="button" class="navbar-burger" :class="{'is-active':isActive}" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample" @click="toggleState">
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
              <span aria-hidden="true"></span>
            </a>
          </div>

          <div id="navbarBasicExample" class="navbar-menu" :class="{'is-active':isActive}">
            <div class="navbar-start has-text-right-mobile">
                <!-- Styles nombre del barrio-->
                <p class="navbar-item"><slot name="gdc"></slot></p>
                <a class="navbar-item"
                	onclick="event.preventDefault();
                	document.getElementById('logout-form').submit();">
                    Cerrar sesión
                </a>
                <slot name="logout-form"></slot>
            </div>
          </div>
        </nav>`,
	data() {
		return {
			isActive: false
		}
	},
  	methods: {
  		toggleState() {
  			this.isActive = !this.isActive;
  		}
  	}
});

new Vue({
  el: '#app'
});