47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<template>
|
|
<nav v-bind:class="{ small: !toggleNav }" class="h-screen bg-orange-400 flex flex-col justify-between">
|
|
<div class="">
|
|
<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="/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">
|
|
<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>
|