<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="toggleNav = !toggleNav"  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,
            }
        }
    }
</script>
