<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.07</div>
				<div class="small" v-if="countMax">
					{{ $t("bloc.title") }} 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 class="pt-4 rounded">
			<NavigationMenuGroup
				v-for="menu in menus"
				:key="menu.title"
				:menu="menu"
				@toggleMenu="toggleMenu" />
		</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>

<style lang="scss" scoped>
nav {
	background: var(--background-color-secondary);
}
</style>