SolidScribe/client/src/App.vue

<template>
	<div id="app">

		<link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

		<!-- Hide this menu on the notes page  -->
		<div class="ui basic segment" v-if="this.$router.currentRoute.path != '/notes'">
			<div class="ui container">
				<div class="ui tabular menu">

					<router-link class="item" exact-active-class="active" to="/">Home</router-link>
					<router-link v-if="loggedIn" exact-active-class="active" class="item" to="/notes">Notes</router-link>
					<router-link class="item" exact-active-class="active" to="/help">Help</router-link>
					<router-link v-if="!loggedIn" exact-active-class="active" class="item" to="/login">Login</router-link>
					<div v-if="loggedIn" v-on:click="destroyLoginToken" class="item">Logout</div>

				</div>
			</div>
		</div>

		<router-view/>

	</div>
</template>

<script>

	
import { mapGetters } from 'vuex'

export default {

	data: function(){ 
		return {
			// loggedIn: 
		}
	},
	beforeCreate: function(){

		//Set color theme based on local storage
		if(localStorage.getItem('nightMode') == 'true'){
			this.$store.commit('toggleNightMode')
		}

		//Puts token into state on page load
		let token = localStorage.getItem('loginToken')
		let username = localStorage.getItem('username')

		if(token){
			this.$store.commit('setLoginToken', {token, username})
		} else {
			this.$store.commit('destroyLoginToken')
			this.$router.push({'path':'/'})
		}
	},
	mounted: function(){
	},
	computed: {
		loggedIn () {
			//Map logged in from state
			return this.$store.getters.getLoggedIn
		}
	},
	methods: {
		destroyLoginToken() {
			this.$store.commit('destroyLoginToken')
		}
	}
}
</script>