main/view/vue/header.vue

<template>

	<div id='HEADER'>

		<!-- Header Icon+Title -->
		<div id='header-icon' @click='gstore.func.toggleMenuSize'>
			<div class='header-title'>{{ gstore.header_title }}</div>
		</div>

		<!-- Header Info -->
		<div id='header-info' v-show='gstore.info.active' :class='gstore.info.type'>{{ gstore.info.message }}</div>

		<!-- Header Notif -->
		<div id='header-notif'>
			<div v-for='(notif, link) in gstore.notif' @click='show_notif(link)' :class='"hnotif " + notif.class' :data-count='notif.count'></div>
			<div v-if='!is_connected' @click='show_login()' class='hnotif login'></div>
			<div v-if='is_connected' @click='logout()' class='hnotif logout'></div>
		</div>

	</div>

</template>


<script>
export default {
	name: 'HEADER',
	data(){
	    return {
	        gstore:			gstore.data,
			is_connected:	_SERVER.session.connected
	    };
	},
	methods: {
		show_notif(uri){
			this.gstore.func.nav(this.$router, uri);
		},
		show_login() {
            this.gstore.signupform = false;
            this.gstore.loginform = !this.gstore.loginform;
		},
		logout() {
		    api.call('DELETE user/logout', null, function() {
		        document.location = '';
			});
		}
	}
}
</script>