From ddd2ae48709e2b9db999cca031a72118fbbd0611 Mon Sep 17 00:00:00 2001
From: xdrm-brackets <doowap31@gmail.com>
Date: Fri, 1 Dec 2017 15:47:28 +0100
Subject: [PATCH] Started css+js+vue page MENU

---
 public_html/css/menu.css | 48 ++++++++++++++++++++++++++++++++++++++++
 view/vue/menu.vue        | 32 +++++++++++++++++++++++++++
 2 files changed, 80 insertions(+)
 create mode 100644 public_html/css/menu.css
 create mode 100644 view/vue/menu.vue

diff --git a/public_html/css/menu.css b/public_html/css/menu.css
new file mode 100644
index 0000000..ccae55e
--- /dev/null
+++ b/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;
+}
+
+
+/****************************/
diff --git a/view/vue/menu.vue b/view/vue/menu.vue
new file mode 100644
index 0000000..0f2c23b
--- /dev/null
+++ b/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>
\ No newline at end of file