82 lines
2.1 KiB
Vue
82 lines
2.1 KiB
Vue
<template>
|
|
<nav class="navbar is-primary" role="navigation" aria-label="main navigation">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a class="navbar-item" href="/">
|
|
PARSLEY
|
|
</a>
|
|
<div class="navbar-burger" :class="{ 'is-active': menuActive}" @click="menuActive = !menuActive">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
</div>
|
|
<div class="navbar-menu" :class="{ 'is-active': menuActive}">
|
|
<div class="navbar-start">
|
|
<router-link to="/" class="navbar-item">Recipes</router-link>
|
|
<router-link to="/ingredients" class="navbar-item">Ingredients</router-link>
|
|
<router-link to="/calculator" class="navbar-item">Calculator</router-link>
|
|
<router-link to="/about" class="navbar-item">About</router-link>
|
|
<router-link v-if="isLoggedIn" to="/notes" class="navbar-item">Notes</router-link>
|
|
<a v-if="isAdmin" class="navbar-item" href="/admin/users">Admin</a>
|
|
|
|
</div>
|
|
<div class="navbar-end">
|
|
<div class="navbar-item has-dropdown is-hoverable" >
|
|
<div v-if="isLoggedIn">
|
|
<a class="navbar-link" href="#" @click.prevent>
|
|
{{ user.name }}
|
|
</a>
|
|
<div class="navbar-dropdown is-boxed">
|
|
<a class="navbar-item" href="#">
|
|
Profile
|
|
</a>
|
|
<router-link to="/logout" class="navbar-item">Logout</router-link>
|
|
</div>
|
|
</div>
|
|
<div v-else>
|
|
<user-login></user-login>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import UserLogin from "./UserLogin";
|
|
import { mapState } from "vuex";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
menuActive: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
...mapState([
|
|
'route',
|
|
'user'
|
|
])
|
|
},
|
|
|
|
watch: {
|
|
route() {
|
|
this.menuActive = false;
|
|
},
|
|
|
|
user() {
|
|
this.menuActive = false;
|
|
}
|
|
},
|
|
|
|
components: {
|
|
UserLogin
|
|
}
|
|
}
|
|
|
|
</script> |