Spookie/assets/js/components/TheNavbar.vue

<template>
	<nav
		class="
		grid fixed inset-x-0 top-0 flex-wrap justify-between items-center py-0 leading-6 border-b
		@border-orange-400 opacity-90 md:flex-nowrap md:justify-start md:px-24 box-border
		bg-neutral-800 text-stone-300 grid-cols-2 place-content-around"
		style="z-index: 1030;"
	>
		<div>
			<router-link
				class="py-1 mr-4 text-xl leading-7 text-white whitespace-nowrap cursor-pointer box-border
			hover:text-white focus:text-white"
				:to="{ name: 'Home' }"
			>
				<img
					src="/build/images/24unix/24_logo_bg_96x96.png"
					class="align-middle box-border"
					alt="24unix.net"
				>
			</router-link>
		</div>
		<div class="text-end">
			<router-link
				id="buttonLogin"
				class="inline-block py-1 px-3 mt-6 text-base font-normal leading-normal text-center
			text-black align-middle bg-orange-400 rounded border border-orange-400 border-solid
			cursor-pointer select-none box-border hover:border-orange-400 hover:bg-orange-400 hover:text-black
			focus:border-orange-400 focus:bg-orange-400 focus:text-black"
				:to="{ name: 'LoginForm' }"
				role="button"
				style="text-decoration: none; transition: none 0s ease 0s; list-style: outside none none;"
			>
				<span class="fa fa-sign-in fa-lg fa-fw"></span>&nbsp;Log In
			</router-link>

		</div>

	</nav>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import 'vue-navigation-bar/dist/vue-navigation-bar.css'

const props = defineProps({
	user: {
		type: Object,
		default() {
			return {
				username: 'tracer'
			}
		}
	}
})

const isLoggedIn = () => (!!this.user)
let showDropdown = ref(false)
const toggleDropDown = () => {
	console.log('toggle', showDropdown)
	showDropdown.value = !showDropdown.value
}

/*
const logout = () => ({
	axios
	.get('/logout')
		.then(this.$emit('invalidate-user'))

})

 */
</script>