45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<template>
|
||
<nav v-bind:class="{ small: !toggleNav }">
|
||
<router-link to="/" class="site-logo-main" v-bind:class="{ small: !toggleNav }">
|
||
<svg-vue icon="logo" />
|
||
</router-link>
|
||
<hr>
|
||
<router-link to="/memos" class="nav-item">
|
||
<svg-vue icon="memos" />
|
||
<span v-bind:class="{ navhidden: !toggleNav }">Memos</span>
|
||
</router-link>
|
||
<router-link to="/to-do-lists" class="nav-item">
|
||
<svg-vue icon="memos" />
|
||
<span v-bind:class="{ navhidden: !toggleNav }">To Do Lists</span>
|
||
</router-link>
|
||
<router-link to="/jeux" class="nav-item">
|
||
<svg-vue icon="games" />
|
||
<span v-bind:class="{ navhidden: !toggleNav }">Jeux</span>
|
||
</router-link>
|
||
<div @click="toggleNavBar" class="nav-toggle mt-5">
|
||
<svg-vue icon="arrow" v-bind:class="{ small: !toggleNav }" />
|
||
</div>
|
||
</nav>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "Nav",
|
||
data: function () {
|
||
return {
|
||
toggleNav: true,
|
||
}
|
||
},
|
||
mounted() {
|
||
let isTrueSet = (localStorage.getItem('navbar') === 'true');
|
||
(isTrueSet) ? this.toggleNav = true : this.toggleNav = false
|
||
},
|
||
methods: {
|
||
toggleNavBar() {
|
||
this.toggleNav = !this.toggleNav
|
||
localStorage.setItem('navbar', JSON.stringify(this.toggleNav));
|
||
}
|
||
}
|
||
}
|
||
</script>
|