55 lines
1.7 KiB
Vue
55 lines
1.7 KiB
Vue
<template>
|
|
<nav v-bind:class="{ small: !toggleNav }" class="">
|
|
<div>
|
|
<router-link to="/" class="logo" v-bind:class="{ small: !toggleNav }">
|
|
<svg-vue icon="logo" />
|
|
</router-link>
|
|
<hr>
|
|
<router-link to="/memos" class="nav-item p-2">
|
|
<svg-vue icon="memos" />
|
|
<span>Memos</span>
|
|
</router-link>
|
|
<router-link to="/to-do-lists" class="nav-item p-2">
|
|
<svg-vue icon="list" />
|
|
<span>ToDo Lists</span>
|
|
</router-link>
|
|
<router-link to="/bookmarks" class="nav-item p-2">
|
|
<svg-vue icon="globe" />
|
|
<span>Bookmarks</span>
|
|
</router-link>
|
|
<router-link to="/events" class="nav-item p-2">
|
|
<svg-vue icon="calendar" />
|
|
<span>Evénements</span>
|
|
</router-link>
|
|
<router-link to="/jeux" class="nav-item p-2">
|
|
<svg-vue icon="games" />
|
|
<span>Jeux</span>
|
|
</router-link>
|
|
</div>
|
|
<div @click="toggleNavBar" class="nav-toggle flex ml-2 cursor-pointer">
|
|
<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>
|