<template>
	<aside class="menu shadow position-fixed">
		<div class="nav_header pb-3">
			<nuxt-link :to="localePath('/')" class="d-flex">
				<img :src="$icon(512)" alt="Accueil" class="logo" />
				<div>
					<h1 class="h3">
						Wotwizard <small><span class="small">v0.10</span></small>
					</h1>
					<small class="text-muted">{{ $t("slogan") }}</small>
				</div>
			</nuxt-link>
			<div class="text-info small mt-2">API graphQL v{{ version }}</div>

			<div class="text-info">
				<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"
import { VERSION } from "@/graphql/queries.js"

export default {
	props: {
		menus: Array
	},
	methods: {
		toggleMenu() {
			this.$emit("toggleMenu")
		}
	},
	apollo: {
		countMax: {
			query: LAST_BLOCK
		},
		version: {
			query: VERSION
		}
	}
}
</script>

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