43 lines
1.4 KiB
Vue
43 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 v-bind:class="{ navhidden: !toggleNav }">Memos</span>
|
||
</router-link>
|
||
<router-link to="/jeux" class="nav-item p-2">
|
||
<svg-vue icon="games" />
|
||
<span v-bind:class="{ navhidden: !toggleNav }">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>
|