Files
assets
images
js
components
blog
minesweeper
pages
projects
quotes
tabs
users
AppLink.vue
HandleLogout.vue
LoginForm.vue
NotFound.vue
TheAbout.vue
TheFooter.vue
TheNavbar.vue
TheSidebar.vue
composables
router
stores
App.vue
index.js
styles
bin
config
migrations
public
src
templates
tools
translations
.env
.eslintrc
.gitignore
.php-cs-fixer.cache
.php-cs-fixer.php
LICENSE
README.md
TODO
bootstrap.js
composer.json
composer.lock
controllers.json
docker-compose.override.yml
docker-compose.yml
package.json
postcss.config.js
rector.php
symfony.lock
webpack.config.js
yarn.lock
Spookie/assets/js/components/TheNavbar.vue

74 lines
1.8 KiB
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>