<template>
    <aside class="menu shadow position-fixed">
        <div class="nav_header pb-3 mb-4">
            <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>
            <div class="d-flex text-info justify-content-between align-items-baseline mt-3 mx-2">
                <div class="">v0.02</div>
                <div class="small" v-if="countMax">Bloc n°<span class="font-weight-bold">{{ countMax.number }}</span> ({{ $d(new Date(countMax.utc0*1000), 'short') }} {{ $t('time.a') }} {{ $d(new Date(countMax.utc0*1000), 'time') }})</div>
            </div>
            <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>
    </aside>
</template>

<script>
import {LAST_BLOCK} from '@/graphql/queries.js'

export default {
    props: {
        menus: Array
    },
    methods: {
        toggleMenu() {
            this.$emit('toggleMenu')
        }
    },
    apollo: {
        countMax : {
            query: LAST_BLOCK,
            error (err) {this.error = err.message}
        }
    },
}
</script>