Skip to content

Instantly share code, notes, and snippets.

@DesKevinMendez
Created September 9, 2019 23:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DesKevinMendez/66ccafe37462ddbf57114fdb6b399a83 to your computer and use it in GitHub Desktop.
Save DesKevinMendez/66ccafe37462ddbf57114fdb6b399a83 to your computer and use it in GitHub Desktop.
navbar laravel-jwt-vue-medium
<template>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<router-link class="navbar-brand" to="/">Home</router-link>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto" v-if="userLoged">
<li class="nav-item" v-for="item in navLoggedUser" :key="item.name">
<router-link class="nav-link" :to="item.to">{{ item.name }}</router-link>
</li>
</ul>
<ul class="navbar-nav ml-auto" v-else>
<li class="nav-item" v-for="item in navNotLoggedUser" :key="item.name">
<router-link class="nav-link" :to="item.to">{{ item.name }}</router-link>
</li>
<li class="nav-item">
<button class="btn btn-sm btn-light" @click="logout">Logout</button>
</li>
</ul>
</div>
</div>
</nav>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Action } from 'vuex-class';
import authTypes from '../store/types/authTypes';
@Component({
name: 'BlogsNavbar',
data() {
return {
userLoged: false,
navLoggedUser: [
{ name:"Register", to: "/register" },
{ name:"Login", to: "/login" },
],
navNotLoggedUser: [
{ name:"Home", to: "/" },
{ name:"Profile", to: "/profile" },
{ name:"About", to: "/about" },
],
}
},
components: {
},
})
export default class navBar extends Vue {
private created() {
this.$data.userLoged = !window.localStorage.getItem('_token');
}
public logout() {
this.cerrarSesion();
}
@Action(`authModule/${authTypes.actions.LOGOUTUSER}`) cerrarSesion: any;
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment