<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="/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>
