frontend-web/src/components/NavBar.vue

<template>
	<nav
		class="flex flex-row fixed top-0 z-50 w-full transition-all bg-white"
		:class="{
			'bg-opacity-100' : showNavBg,
			'bg-opacity-0' : !showNavBg,
		}"
	>
		<router-link :to="{name: 'Home'}">Home</router-link>
		<router-link :to="{name: 'ManagePhotos'}">Photos</router-link>
		<router-link :to="{name: 'LogsList'}">All Logs</router-link>
		<router-link :to="{name: 'CreateLog'}">+ New Log</router-link>
		<router-link :to="{name: 'LogTemplatesList'}">All Templates</router-link>
		<router-link :to="{name: 'CreateLogTemplate'}">+ New Template</router-link>
		<router-link :to="{name: 'Login'}" v-if="!loggedIn">Login</router-link>
		<div v-else @click="logout">Logged in as {{authUser}}</div>
	</nav>
</template>

<script>
import store from '@/store/index.js'

export default {
	name: 'NavBar',
	data() { 
		return {
			scrollThreshold: 120,
			scrollPosition: 0,
			showNavBg: false,
		}
	},
	mounted() {
		window.addEventListener('scroll', this.updateScrollPosition)
	},
	computed: {
		loggedIn() {
			return store.getters.auth.authenticated
		},
		authUser() {
			return store.getters.auth.user
		}
	},
	methods: {
		updateScrollPosition() {
			this.scrollPosition = window.scrollY

			if (!this.showNavBg && this.scrollPosition >= this.scrollThreshold) {
				this.showNavBg = true
			} else if (this.showNavBg && this.scrollPosition <= 10) {
				this.showNavBg = false
			}
		},
		logout() {
			store.dispatch('logout')
			this.$router.push({name: 'Login'})
		}
	},
}
</script>

<style scoped>
nav {
	width: 100%;
}

a {
	padding: 0.75em;
	transition: all 0.15s ease-in-out;
}

.router-link-exact-active,
a:hover {
	background-color: seagreen;
	color: white;
}

.router-link-exact-active {
	font-weight: bold;
}
</style>