Turbo/peer-group-grading
9
3
Fork 0
Code Issues 44 Pull requests 2 Projects 1 Releases Packages Wiki Activity Actions

Compare commits

base: Turbo:9bad76dcd6596fc5b10f1a2ca917fc326d7f6b3c
Branches Tags
Turbo:main
Turbo:documentation/readme
Turbo:frontend/changing-more-things-on-header
Turbo:automate-migration-on-startup
Turbo:ci/test
Turbo:ci/fmt-none-failing
..
compare: Turbo:ca04737c4992c220c463d3b0b747122b61de6275
Branches Tags
Turbo:documentation/readme
Turbo:main
Turbo:frontend/changing-more-things-on-header
Turbo:automate-migration-on-startup
Turbo:ci/test
Turbo:ci/fmt-none-failing

No commits in common. "9bad76dcd6596fc5b10f1a2ca917fc326d7f6b3c" and "ca04737c4992c220c463d3b0b747122b61de6275" have entirely different histories.
9bad76dcd6 ... ca04737c49

3 changed files with 97 additions and 88 deletions
Show stats Expand all files Collapse all files

33
frontend/src/App.vue
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>
</template> <RouterView />
</template>
<style scoped>
</style>

13
frontend/src/assets/main.css
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;
}
}

139
frontend/src/components/HeaderNav.vue
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> <template v-else>
</nav> <button class="nav-button">
</template> <component :is="LogOutIcon" class="icon" />
Logout
<script setup lang="ts"> </button>
import { LogInIcon, LogOutIcon, BoltIcon } from 'lucide-vue-next';
<button
defineProps<{ v-if="isTeacher"
isLoggedIn: boolean; class="nav-button"
isTeacher: boolean; >
}>(); <component :is="BoltIcon" class="icon" />
</script> Lehrerverwaltung
</button>
<style scoped> </template>
.header-container { </div>
display: flex; </nav>
justify-content: space-between; </template>
align-items: center;
padding: 1rem; <script setup lang="ts">
width: 100%; import { LogInIcon, LogOutIcon, BoltIcon } from 'lucide-vue-next';
box-sizing: border-box;
} defineProps<{
isLoggedIn: boolean;
.left-icon { isTeacher: boolean;
display: flex; }>();
align-items: center; </script>
}
<style scoped>
.nav-items { .header-container {
display: flex; display: flex;
gap: 1rem; justify-content: space-between;
align-items: center; align-items: center;
margin-left: auto; 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;
.icon { cursor: pointer;
width: 1rem; font-weight: bold;
height: 1rem; }
}
</style> .icon {
width: 1rem;
height: 1rem;
}
</style>