Compare commits

..

2 commits

Author SHA1 Message Date
fe87593b9b push cargo-lock
Some checks failed
ci/woodpecker/pr/cargo_clippy Pipeline is pending
ci/woodpecker/pr/cargo_test Pipeline is pending
ci/woodpecker/pr/check_fmt Pipeline is pending
ci/woodpecker/pr/cargo_check Pipeline failed
2025-04-09 09:58:45 +02:00
5f60dd59f9 feat: automatically run migration on startup
Some checks failed
ci/woodpecker/pr/cargo_check Pipeline was successful
ci/woodpecker/pr/cargo_clippy Pipeline was successful
ci/woodpecker/pr/cargo_test Pipeline was successful
ci/woodpecker/pr/check_fmt Pipeline failed
2025-04-08 21:46:58 +02:00
3 changed files with 97 additions and 88 deletions

View file

@ -1,23 +1,26 @@
<script setup lang="ts"> <script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'; import { RouterLink, RouterView } from 'vue-router';
import HeaderNav from './components/HeaderNav.vue'; import HeaderNav from './components/HeaderNav.vue';
import { BoltIcon } from 'lucide-vue-next';
const isTeacher = true; const isTeacher = false
const isLoggedIn = true; const isLoggedIn = true
</script> </script>
<template> <template>
<header class="sticky top-0 z-50 bg-black w-full"> <div class="sticky top-0">
<HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher"> <header>
<template #left-icon> <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
<BoltIcon class="icon" /> <template #left-icon>
</template> <BoltIcon class="icon" /> <!--Hier dann ein richtiges Logo rein-->
</HeaderNav> </template>
</header> </HeaderNav>
<div id="app" class="flex flex-col min-h-screen overflow-x-hidden"> </header>
<main class="flex-grow p-4">
<RouterView />
</main>
</div> </div>
<RouterView />
</template> </template>
<style scoped>
</style>

View file

@ -20,3 +20,16 @@ a,
background-color: hsla(160, 100%, 37%, 0.2); background-color: hsla(160, 100%, 37%, 0.2);
} }
} }
@media (min-width: 1024px) {
body {
display: flex;
place-items: start;
}
#app {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0 2rem;
}
}

View file

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