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