<template>
    <aside class="menu shadow position-fixed">
        <div class="nav_header pb-3 mb-5">
            <nuxt-link :to="localePath('/')" class="d-flex">
                <img src="@/assets/img/logo.png" alt="Accueil" class="logo">
                <div><h1 class="h2">Wotwizard</h1><small class="text-muted">{{ $t('slogan') }}</small></div>
            </nuxt-link>
            <button type="button" class="close position-absolute d-xl-none" aria-label="Close" @click="toggleMenu">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <nav>
            <NavigationMenuGroup v-for="menu in menus" :key="menu.title" :menu="menu"/>
        </nav>
        <div class="version position-absolute p-3 text-muted"><br>v0.01</div>
    </aside>
</template>

<script>
export default {
    props: {
        menus: Array
    },
    methods: {
        toggleMenu() {
            this.$emit('toggleMenu')
        }
    }
}
</script>

<style lang="scss">
.version {
    bottom: 0;
    right: 0;
}
</style>