117 lines
3.7 KiB
Vue
117 lines
3.7 KiB
Vue
<template>
|
|
<div class="flex justify-between bg-gray-900 text-white pt-2 pb-3 pl-8">
|
|
<div class="basis-1/3 logo">
|
|
<p class="font-mono text-lg py-2">
|
|
<RouterLink to="/">Filmstudiostube</RouterLink>
|
|
</p>
|
|
</div>
|
|
<div class="flex justify-around basis-1/3 max-md:hidden">
|
|
<div v-if="!isAnonym">
|
|
<RouterLink to="/contracts">
|
|
<p class="py-2">Aufträge</p>
|
|
</RouterLink>
|
|
</div>
|
|
<div v-if="!isAnonym" class="nav-item">
|
|
<RouterLink to="/support">
|
|
<p class="py-2">Support</p>
|
|
</RouterLink>
|
|
</div>
|
|
<div v-if="isVerwaltung" class="nav-item">
|
|
<RouterLink to="/administration">
|
|
<p class="py-2">Administration</p>
|
|
</RouterLink>
|
|
</div>
|
|
<div v-if="isAnonym" class="nav-item">
|
|
<RouterLink to="/arbeiten">
|
|
<p class="py-2">Arbeiten</p>
|
|
</RouterLink>
|
|
</div>
|
|
<div v-if="isAnonym" class="nav-item">
|
|
<RouterLink to="/contact">
|
|
<p class="py-2">Kontakt</p>
|
|
</RouterLink>
|
|
</div>
|
|
<div v-if="isAnonym" class="nav-item">
|
|
<RouterLink to="/about">
|
|
<p class="py-2">Über uns</p>
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="isAnonym"
|
|
class="nav-item basis-1/6 max-md:justify-end max-md:pr-5 max-md:flex max-md:basis-3/6">
|
|
<button
|
|
class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
|
|
@click="login">
|
|
Login
|
|
</button>
|
|
</div>
|
|
<div class="pt-2 md:hidden" @click="openNavbar">
|
|
<div class="space-y-1.5 pt-2 pb-2 mr-2 pr-2 pl-2 bg-slate-100 rounded">
|
|
<span class="block w-6 h-0.5 bg-gray-500"></span>
|
|
<span class="block w-6 h-0.5 bg-gray-500"></span>
|
|
<span class="block w-6 h-0.5 bg-gray-500"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="!isNavbarClosed">
|
|
<ul class="bg-gray-900">
|
|
<li v-if="!isAnonym" class="block text-md py-4 text-white text-center">
|
|
<RouterLink to="/contracts">Aufträge</RouterLink>
|
|
</li>
|
|
<li v-if="!isAnonym" class="block text-md py-4 text-white text-center">
|
|
<RouterLink to="/support">Support</RouterLink>
|
|
</li>
|
|
<li v-if="isVerwaltung" class="block text-md py-4 text-white text-center">
|
|
<RouterLink to="/administration">Administration</RouterLink>
|
|
</li>
|
|
<li v-if="isAnonym" class="block text-md py-4 text-white text-center">
|
|
<RouterLink to="/arbeiten">Arbeiten</RouterLink>
|
|
</li>
|
|
<li v-if="isAnonym" class="block text-md py-4 text-white text-center">
|
|
<RouterLink to="/contact">Kontakt</RouterLink>
|
|
</li>
|
|
<li v-if="isAnonym" class="block text-md py-4 text-white text-center">
|
|
<RouterLink to="/about">Über uns</RouterLink>
|
|
</li>
|
|
<li v-if="isAnonym" class="py-2 flex justify-center">
|
|
<button
|
|
class="bg-blue-600 hover:bg-blue-500 duration-300 text-white px-3 py-1 my-2 rounded"
|
|
@click="login">
|
|
Login
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getKeycloak, keycloakSetup } from '../authentication/AuthHelper'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
keycloak: this.$store.state.keycloak.keycloak,
|
|
isNavbarClosed: true
|
|
}
|
|
},
|
|
computed: {
|
|
isVerwaltung() {
|
|
return this.$store.state.keycloak.keycloak.realmAccess.roles.includes('verwaltung')
|
|
},
|
|
isAnonym() {
|
|
return this.$store.state.keycloak.isAnonym
|
|
}
|
|
},
|
|
methods: {
|
|
async login() {
|
|
if (this.$store.state.keycloak.keycloak === null) {
|
|
await keycloakSetup()
|
|
}
|
|
},
|
|
openNavbar() {
|
|
this.isNavbarClosed = !this.isNavbarClosed
|
|
}
|
|
}
|
|
}
|
|
</script>
|