Sidebar.vue

<template>
	<aside class="menu position-fixed d-flex flex-column border-end">
		<div class="mb-4">
			<nuxt-link
				@click.native="
					if (screenwidth < 1200) {
						toggleMenu()
					}
				"
				:to="localePath('/')"
				class="d-flex px-3 pt-3">
				<img :src="$icon(512)" alt="Accueil" class="logo" />
				<div>
					<h1 class="h3">Wotwizard</h1>
					<small class="text-muted">{{ $t("slogan") }}</small>
				</div>
			</nuxt-link>
			<div class="p-3 border-bottom border-2 text-muted">
				<div class="small mt-2">API graphQL v{{ version }}</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="btn-close position-absolute d-xl-none"
				:aria-label="$t('aria.close')"
				@click="toggleMenu"></button>
		</div>
		<nav class="py-2 rounded flex-grow-1">
			<NavigationMenuGroup
				v-for="menu in menus"
				:key="menu.title"
				:menu="menu"
				@toggleMenu="toggleMenu" />
		</nav>
		<div class="py-3 text-center">
			<button
				class="btn btn-secondary btn-sm"
				@click="
					if (screenwidth < 1200) {
						toggleMenu()
					}
					$router.push(localePath('a-propos'))
				">
				v{{ $config.clientVersion }} | {{ $t("apropos.title") }}
			</button>
		</div>
	</aside>
</template>

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

export default {
	data() {
		return {
			screenwidth: 0
		}
	},
	props: {
		menus: Array
	},
	methods: {
		toggleMenu() {
			this.$emit("toggleMenu")
		},
		onResize() {
			this.screenwidth = window.innerWidth
		}
	},
	apollo: {
		countMax: {
			query: LAST_BLOCK
		},
		version: {
			query: VERSION
		}
	},
	mounted() {
		this.screenwidth = window.innerWidth
		this.$nextTick(function () {
			this.onResize()
		})
		window.addEventListener("resize", this.onResize)
	}
}
</script>

<style lang="scss" scoped>
aside {
	background: var(--bg-menu-color);
}

nav {
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-width: thin;
}
</style>