upd: ... (added component 'notification-stack' to wrapper, can be shown with 'gstore.data.nstack=true' + its css)

public_html/css/layout.css

@@ -91,4 +91,29 @@ body{
 #WRAPPER.min #CONTAINER{
 	left: 3.5em;
 	width: calc( 100% - 3.5em );
+}
+
+
+/* Notification Stack */
+#WRAPPER #NOTIF-STACK{
+	display: none;
+	position: absolute;
+		top: 4em;
+		left: calc( 100% - 15em );
+		width: 14em;
+		min-height: 2em;
+		height: auto;
+
+	border: 1px solid #ddd;
+	border-radius: 3px;
+
+	background-color: #fff;
+
+	overflow: hidden;
+
+	z-index: 101;
+}
+
+#WRAPPER #NOTIF-STACK.active{
+	display: block;
 }

public_html/css/notification-stack.css

@@ -0,0 +1,58 @@
+/* Header */
+#NOTIF-STACK > .head{
+	display: block;
+	position: relative;
+		width: 100%;
+
+	padding: .7em 0;
+
+	border-radius: 3px 3px 0 0;
+	border-bottom: 1px solid #ddd;
+
+	text-align: center;
+	color: #888;
+}
+
+/* Container */
+#NOTIF-STACK > .body{
+	display: block;
+	position: relative;
+		width: 100%;
+		min-height: 2em;
+		height: auto;
+		max-height: 12em;
+
+	border-radius: 0 0 3px 3px;
+
+	overflow: auto;
+
+}
+
+/* Items */
+#NOTIF-STACK > .body > span{
+	display: block;
+	position: relative;
+
+	padding: .8em 1em;
+
+	border-bottom: 1px solid #ddd;
+
+	background-color: #fff;
+
+	color: #555;
+
+	cursor: pointer;
+
+	transition: background-color .2s ease-in-out,
+				color            .2s ease-in-out;
+}
+
+#NOTIF-STACK > .body > span:hover{
+	background-color: #eee;
+	color: #333;
+}
+
+#NOTIF-STACK > .body > span:last-child{
+	border: 0;
+	border-radius: 0 0 3px 3px;
+}

view/home.php

@@ -18,6 +18,7 @@
 		<link rel='stylesheet' type='text/css' href='/css/menu.css'>
 		<link rel='stylesheet' type='text/css' href='/css/header.css'>
 		<link rel='stylesheet' type='text/css' href='/css/container.css'>
+		<link rel='stylesheet' type='text/css' href='/css/notification-stack.css'>
 
 	<!-- JS dependencies -->
 	<script type='text/javascript' src='/js/_SERVER.js'></script>

view/vue-config.js

@@ -89,4 +89,7 @@ gstore.add('func', {
 
 
 // new-message container
-gstore.add('new_msg', '');
+gstore.add('new_msg', '');
+
+// notification stack visibility
+gstore.add('nstack', false);

view/vue/notification-stack.vue

@@ -0,0 +1,24 @@
+<template>
+
+	<div id='NOTIF-STACK' :class='gstore.nstack ? "active" : ""'>
+
+		<!-- Header -->
+		<div class='head'>Notifications</div>
+
+		<!-- Body -->
+		<div class='body'>
+			<span v-for='n in gstore.notif[0].data'><b>{{ n }}</b> est connecté</span>
+		</div>
+
+	</div>
+
+</template>
+
+
+<script>
+export default {
+	name: 'NOTIFICATION_STACK',
+	data(){ return { gstore: gstore.data }; },
+	methods: {}
+}
+</script>

view/vue/wrapper.vue

@@ -10,6 +10,13 @@
 		<!-- Container -->
 		<router-view></router-view>
 
+
+		<!-- Notification Stack -->
+		<notifstack-comp></notifstack-comp>
+
+		<!-- Login form -->
+		<!-- <loginform-comp></loginform-comp> -->
+
 	</div>
 </template>
 
@@ -18,13 +25,16 @@
 
 	import header_vue from './header.vue'
 	import menu_vue   from './menu.vue'
+	import notifstack_vue  from './notification-stack.vue'
+	// import loginform_vue   from './login-form.vue'
 
 	export default {
 		name: 'wrapper',
 		data(){ return { gstore: gstore.data }; },
 		components: {
-			'HeaderComp': header_vue,
-			'MenuComp':   menu_vue
+			'HeaderComp':     header_vue,
+			'MenuComp':       menu_vue,
+			'NotifstackComp': notifstack_vue
 		}
 	}