main/view/vue/menu.vue

<template>

	<div id='MENU'>

		<div v-for='(item, index) in gstore.menu_item' class='menu-item-wrapper'>

			<div :class="(index == gstore.menu_item_active) ? 'menu-item active' : 'menu-item'" @click='navigate_menu(index)' :style='"background-image: url(/image/menu/" + item.icon + ".svg@333333"'>
			<span>{{ item.label }}</span>
			</div>

		</div>

	</div>

</template>


<script>
export default {
	name: 'MENU',
	data(){ return { gstore: window.gstore.data }; },
	methods: {
		navigate_menu(page){

			// (1) Update URL
			console.log('Loading page \''+page+'\'');
			window.history.pushState(page, page, '/'+page+'/');

			// (2) Activate current element
			this.gstore.menu_item_active = page;

		}
	}
}
</script>