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

frontend/creating-a-sidebar #62

Merged
DulliGulli merged 16 commits from frontend/creating-a-sidebar into main 2025-04-09 10:43:10 +02:00
Conversation 0 Commits 16 Files changed 5 +86 -77
3 changed files with 86 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 5d7ef0f8f9 - Show all commits

7
frontend/src/App.vue
View file

@ -1,10 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'
import HeaderNav from './components/HeaderNav.vue' import HeaderNav from './components/HeaderNav.vue'
import SideBar from './components/SideBar.vue' import SideBar from './components/SideBar.vue'
import { RouterLink, RouterView } from 'vue-router' import { RouterLink, RouterView } from 'vue-router'
const isTeacher = false const isTeacher = ref(true)
const isLoggedIn = true const isLoggedIn = ref(true)
</script> </script>
<template> <template>
@ -18,7 +19,7 @@ const isLoggedIn = true
</HeaderNav> </HeaderNav>
</header> </header>
</div> </div>
<SideBar /> <SideBar :isLoggedIn="isLoggedIn" :isTeacher="isTeacher" />
<div> <div>
<RouterView /> <RouterView />
</div> </div>

131
frontend/src/components/HeaderNav.vue
View file

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

25
frontend/src/components/SideBar.vue
View file

@ -2,6 +2,11 @@
import Drawer from 'primevue/drawer' import Drawer from 'primevue/drawer'
import { ref } from 'vue' import { ref } from 'vue'
defineProps<{
isLoggedIn: boolean
isTeacher: boolean
}>()
var elements = [ var elements = [
{ name: 'Max', id: 25 }, { name: 'Max', id: 25 },
{ name: 'Anna', id: 30 }, { name: 'Anna', id: 30 },
@ -9,9 +14,9 @@ var elements = [
] ]
var visible = ref(true) var visible = ref(true)
var closeIcon = ref(false) var closeIcon = ref(false)
var counter = ref(0) var counter = ref(null)
function doShit(input: Number) {} function setClass(input: Number) {}
</script> </script>
<template> <template>
@ -22,12 +27,22 @@ function doShit(input: Number) {}
:dismissable="false" :dismissable="false"
v-on:hide="visible = true" v-on:hide="visible = true"
header="Sidebar" header="Sidebar"
v-if="isLoggedIn"
> >
<div> <div v-if="isTeacher">
<p>{{ counter }}</p>
<ul> <ul>
<li v-for="item in elements"> <li v-for="item in elements">
<a href="/about" @click="doShit(item.id)">{{ item.name }}</a> <a href="/about" @click="setClass(item.id)">{{ item.name }}</a>
</li>
</ul>
</div>
<div v-else>
<ul>
<li>
<a href="/about">Offene/Abgegebene Evaluaionsbögen</a>
</li>
<li>
<a href="/about">Notenübersicht</a>
</li> </li>
</ul> </ul>
</div> </div>