Spookie/assets/js/components/TheNavbar.vue

<template>
	<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top navbar-top">
		<router-link
			class="navbar-brand"
			:to="{ name: 'Home' }"
		>
			<img
				src="/build/images/24unix/24_logo_bg_96x96.png"
				class="img-fluid"
				alt="24unix.net"
			>
		</router-link>
		<button
			class="navbar-toggler border-0"
			type="button"
			data-toggle="collapse"
			data-target="#CollapsingNavbar"
		>
			☰
		</button>
		<div
			id="CollapsingNavbar"
			class="collapse navbar-collapse"
		>
			<ul class="navbar-nav ms-auto">
				<li class="nav-item">
					<div v-if="isLoggedIn">
						<button
							v-if="isLoggedIn"
							data-bs-target="#dropdown-menu"
							data-bs-toggle="dropdown"
							class="btn btn-primary button-login dropdown-toggle ml-auto mb-2 mr-5"
							:to="{ name: 'Home'}"
						>
							{{ user.username }}
						</button>
						<div
							id="dropdown-menu"
							class="dropdown-menu dropdown-menu-dark dropdown-menu-end"
							aria-labelledby="navbar-dropdown"
						>
							<router-link
								:to="{name: 'Profile'}"
								class="dropdown-item"
								href="/profile"
							>
								<span
									class="fa fa-lg fa-fw fa-user"
									aria-hidden="true"
								/>
								Profile
							</router-link>
							<a
								class="dropdown-item"
								href="#"
							>
								<span
									class="fa fa-lg fa-fw fa-wrench"
									aria-hidden="true"
								/>
								Settings</a>
							<div class="dropdown-divider"/>
							<a
								class="dropdown-item"
								href="/admin"
							>
								<span
									class="fa fa-lg fa-fw fa-cog"
									aria-hidden="true"
								/>
								Administration
							</a>
							<div class="dropdown-divider"/>
							<a
								class="dropdown-item"
								href="/logout"
							>
								<span
									class="fa fa-lg fa-fw fa-sign-out"
									aria-hidden="true"
								/>
								&nbsp;Logout
							</a>
						</div>
					</div>

					<button
						v-else
						class="btn btn-outline-primary"
					>
						<router-link :to="{ name: 'LoginForm'}">
							<span
								class="fa fa-sign-in fa-lg fa-fw"
								aria-hidden="true"
							/>
							Login
						</router-link>
					</button>
				</li>
			</ul>
		</div>
		<!--
												<span
													class="fa fa-lg fa-fw fa-wrench"
													aria-hidden="true"
												/>&nbsp;Settings
								</b-dropdown-item>
								<b-dropdown-divider/>
								<b-dropdown-item @click="logout">
												<span
													class="fa fa-lg fa-fw fa-sign-out"
													aria-hidden="true"
												/>&nbsp;Logout
								</b-dropdown-item>
	-->
	</nav>
</template>

<script>
import axios from 'axios'

import 'vue-navigation-bar/dist/vue-navigation-bar.css'

export default {
	name: 'TheNavbar',
	components: {},
	props: {
		user: {
			type: Object,
			default: null
		}
	},
	data: () => ({}),
	computed: {
		isLoggedIn() {
			return !!this.user
		}
	},
	methods: {
		logout() {
			console.log('logout')
			axios
				.get('/logout')
				.then(this.$emit('invalidate-user'))
		}

	}
}
</script>

<style>
</style>