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

chaged the header and styling #60

Merged
Dr_S_Eggs merged 1 commit from frontend/changing-more-things-on-header into main 2025-04-09 09:45:16 +02:00
Conversation 1 Commits 1 Files changed 3 +88 -97
3 changed files with 88 additions and 97 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 6b4dd96d83 - Show all commits

33
frontend/src/App.vue
View file

@ -1,26 +1,23 @@
<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 = false const isTeacher = true;
const isLoggedIn = true const isLoggedIn = true;
</script> </script>
<template> <template>
<div class="sticky top-0"> <header class="sticky top-0 z-50 bg-black w-full">
<header> <HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher">
<HeaderNav :isLoggedIn="isLoggedIn" :isTeacher="isTeacher"> <template #left-icon>
<template #left-icon> <BoltIcon class="icon" />
<BoltIcon class="icon" /> <!--Hier dann ein richtiges Logo rein--> </template>
</template> </HeaderNav>
</HeaderNav> </header>
</header> <div id="app" class="flex flex-col min-h-screen overflow-x-hidden">
<main class="flex-grow p-4">
<RouterView />
</main>
</div> </div>
<RouterView /> </template>
</template>
<style scoped>
</style>

13
frontend/src/assets/main.css
View file

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