<template>
	<div class="mb-4">
		<h2 class="small text-muted text-uppercase ml-4 mb-0 pb-2 border-bottom">
			{{ $t(menu.title) }}
		</h2>
		<div class="nav navbar-nav list-group list-group-flush">
			<NuxtLink
				class="list-group-item list-group-item-action p-0 pl-3"
				:to="localePath(item.path)"
				v-for="item in menu.items"
				:key="item.path"
				@click.native="toggleMenu()">
				<div class="position-relative py-2">{{ $t(item.title) }}</div>
			</NuxtLink>
		</div>
	</div>
</template>

<script>
export default {
	props: {
		menu: Object
	},
	methods: {
		toggleMenu() {
			if (window.innerWidth < 1200) {
				this.$emit("toggleMenu")
			}
		}
	}
}
</script>