Added css+js+vue page HEADER

public_html/css/header.css

@@ -0,0 +1,128 @@
+/* Header Icon */
+#HEADER #header-icon{
+	display: block;
+	position: absolute;
+		top: 0;
+		left: 0;
+		width: calc( 20em - 3em - 2px );
+		height: calc( 100% - 2*1.7em );
+
+	padding: 1.7em 0;
+	padding-left: 3em;
+	border-right: 2px solid #294496;
+
+	background: url('/image/header-icon.svg') center left 2em no-repeat;
+	background-size: 1.7em;
+	background-color: #2a469c;
+
+	color: #fff;
+}
+
+/* Header Icon > Title */
+#header-icon .header-title{
+	display: inline-block;
+	position: relative;
+	margin-left: 2em;
+
+	font-size: 1.2em;
+	letter-spacing: 2px;
+
+	overflow: hidden;
+}
+
+
+
+/****************************/
+
+
+/* Header info container */
+#header-info{
+	display: block;
+	position: absolute;
+		top: 0;
+		left: 20em;
+		width: calc( 100% - 20em - 12em - 2em - 5em );
+		height: calc( 100% - 2*1.7em );
+
+	padding: 1.7em 0;
+	padding-left: 5em;
+	background: url('/image/header/info/info.svg') center left 2em no-repeat;
+	background-size: 1.6em;
+}
+
+#header-info.info{    background-image: url('/image/header/info/info.svg');    }
+#header-info.warning{ background-image: url('/image/header/info/warning.svg'); }
+#header-info.error{   background-image: url('/image/header/info/error.svg');   }
+
+
+/****************************/
+
+
+
+/* Header Notifications */
+#header-notif{
+	display: flex;
+	position: absolute;
+		top: 0;
+		left: calc( 100% - 12em - 2em ); /* 2em not to be in the border */
+		width: 12em;
+		height: 100%;
+
+	/* flex */
+	flex-direction: row;
+	justify-content: space-around;
+	align-items: center;
+	flex-wrap: nowrap;
+
+	overflow: hidden;
+}
+
+/* Notification element */
+#header-notif .hnotif,
+#header-notif .hnotif.bell{
+	display: block;
+		width: 2em;
+		height: 2em;
+
+	background: url('/image/header/notif/bell.svg') center center no-repeat;
+	background-size: 50%;
+	background-color: transparent;
+
+	border-radius: 50% / 50%;
+
+	cursor: pointer;
+
+	transition: background-color .2s ease-in-out;
+}
+
+#header-notif .hnotif:hover{
+	background-color: #294496;
+}
+
+#header-notif .hnotif.message{ background-image: url('/image/header/notif/message.svg'); }
+#header-notif .hnotif.search{  background-image: url('/image/header/notif/search.svg');  }
+#header-notif .hnotif.menu{    background-image: url('/image/header/notif/menu.svg');    }
+
+/* Counter element */
+#header-notif .hnotif[data-count]:before{
+	content: attr(data-count);
+
+	display: block;
+	position: absolute;
+		margin-left: 1.2em;
+		min-width: calc( 1.4em - 2*.35em );
+		width: auto;
+		height: calc( 1.4em - 2*.1em );
+
+	padding: .1em .35em;
+
+	border-radius: 50% / 50%;
+	background: #ed4222;
+
+	font-size: .8em;
+
+}
+
+#header-notif .hnotif[data-count='']:before{
+	display: none;
+}

view/vue/header.vue

@@ -1,7 +1,23 @@
 <template>
 
 	<div id='HEADER'>
-		HEADER CONTENT (component)
+
+		<!-- Header Icon+Title -->
+		<div id='header-icon'>
+			<div class='header-title'>{{ gstore.header_title }}</div>
+		</div>
+
+		<!-- Header Info -->
+		<div id='header-info' v-show='gstore.notif.active' :class='gstore.notif.type'>{{ gstore.notif.message }}</div>
+
+		<!-- Header Notif -->
+		<div id='header-notif'>
+			<div class='hnotif bell' data-count='4'></div>
+			<div class='hnotif message'data-count='23'></div>
+			<div class='hnotif search'></div>
+			<div class='hnotif menu'></div>
+		</div>
+
 	</div>
 
 </template>
@@ -9,6 +25,7 @@
 
 <script>
 export default {
-  name: 'HEADER'
+	name: 'HEADER',
+	data(){ return { gstore: window.gstore.data }; }
 }
 </script>