54 lines
1.6 KiB
Vue
54 lines
1.6 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 to="/notes" class="navbar-item">Notes</router-link>
|
||
|
|
<a class="navbar-item" href="/admin/users">Admin</a>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="navbar-end">
|
||
|
|
<div class="navbar-item has-dropdown is-hoverable" >
|
||
|
|
<a class="navbar-link" href="#" @click.prevent>
|
||
|
|
Dan
|
||
|
|
</a>
|
||
|
|
<div class="navbar-dropdown is-boxed">
|
||
|
|
<a class="navbar-item" href="#">
|
||
|
|
Profile
|
||
|
|
</a>
|
||
|
|
<a class="navbar-item" href="#">
|
||
|
|
Logout
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</nav>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
menuActive: false
|
||
|
|
};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|