Started css+js+vue page MENU

public_html/css/menu.css

@@ -0,0 +1,48 @@
+/* Menu Item Wrapper */
+#MENU .menu-item-wrapper{
+	display: block;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 4em;
+
+	flex: 0 0 1;
+
+	font-size: .8em;
+
+	overflow: hidden;
+}
+
+/* Menu Standard Item */
+#MENU .menu-item-wrapper .menu-item{
+	display: block;
+		top: 0;
+		left: 0;
+		width: calc( 100% - 3em );
+		height: calc( 100% - 1.5em );
+
+	background-color: #fff;
+
+	padding-top: 1.5em;
+	padding-left: 3em;
+
+	color: #888;
+	letter-spacing: 2px;
+
+	overflow: hidden;
+
+	cursor: pointer;
+
+	transition: background-color .2s ease-in-out,
+				color 			 .2s ease-in-out;
+}
+
+#MENU .menu-item:hover,
+#MENU .menu-item.active{
+	color: #444;
+
+	background-color: #eef2f5;
+}
+
+
+/****************************/

view/vue/menu.vue

@@ -0,0 +1,32 @@
+<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)'>{{ item.label }}</div>
+
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'MENU',
+	data(){ return { gstore: window.gstore.data }; },
+	methods: {
+		navigate_menu(page){
+
+			// (1) Manage action
+			console.log('Loading page \''+page+'\'');
+
+			// (2) Activate current element
+			this.gstore.menu_item_active = page;
+
+		}
+	}
+}
+</script>