78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<template>
|
|
<nav class="header-container">
|
|
<div class="left-icon">
|
|
<slot name="left-icon"></slot>
|
|
</div>
|
|
<div class="nav-items">
|
|
<button
|
|
v-if="!isLoggedIn"
|
|
class="nav-button"
|
|
>
|
|
<component :is="LogInIcon" class="icon" />
|
|
Login
|
|
</button>
|
|
<template v-if="isLoggedIn">
|
|
<button class="nav-button">
|
|
<component :is="LogOutIcon" class="icon" />
|
|
Logout
|
|
</button>
|
|
|
|
<button
|
|
v-if="isTeacher"
|
|
class="nav-button"
|
|
>
|
|
<component :is="BoltIcon" class="icon" />
|
|
Lehrerverwaltung
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { LogInIcon, LogOutIcon, BoltIcon } from 'lucide-vue-next';
|
|
|
|
defineProps<{
|
|
isLoggedIn: boolean;
|
|
isTeacher: boolean;
|
|
}>();
|
|
</script>
|
|
|
|
<style scoped>
|
|
.header-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 1rem;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.left-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.nav-items {
|
|
display: flex;
|
|
gap: 1rem;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.nav-button {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
color: white;
|
|
}
|
|
|
|
.icon {
|
|
width: 1rem;
|
|
height: 1rem;
|
|
}
|
|
</style>
|