tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat(frontend): menubalk is volledig af qua stijl en items

Browse source
This commit is contained in:
Laure Jablonski 2025-02-28 12:26:07 +01:00
parent 5088b02f75
commit 4009bb2111
1 changed files with 72 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

109
frontend/src/components/MenuBar.vue
View file

@ -7,7 +7,11 @@
const isTeacher = route.path.includes("teacher"); const isTeacher = route.path.includes("teacher");
const role = isTeacher ? "teacher" : "student"; const role = isTeacher ? "teacher" : "student";
const name = "Bob Debouwer"; // TODO: naam opvragen const name = "Kurt Cobain"; //TODO: naam opvragen
const initials = name
.split(" ")
.map((n) => n[0])
.join("");
const userId = computed(() => route.params.id as string); const userId = computed(() => route.params.id as string);
</script> </script>
@ -15,46 +19,66 @@
<template> <template>
<main> <main>
<nav class="menu"> <nav class="menu">
<ul> <div class="left">
<ul>
<li>
<router-link
:to="`/${role}/${userId}`"
class="dwengo_home"
>
<img
class="dwengo_logo"
:src="dwengo_logo"
/>
<p class="caption">
{{ role }}
</p>
</router-link>
</li>
<li>
<router-link
:to="`/${role}/${userId}/assignment`"
class="menu_item"
>
assignments
</router-link>
</li>
<li>
<router-link
:to="`/${role}/${userId}/class`"
class="menu_item"
>classes</router-link
>
</li>
<li>
<router-link
:to="`/${role}/${userId}/discussion`"
class="menu_item"
>discussions</router-link
>
</li>
</ul>
</div>
<div class="right">
<li> <li>
<router-link <!-- TODO: log out when clicked -->
:to="`/${role}/${userId}`" <router-link :to="`/login`">
class="dwengo_home" <v-icon
> icon="mdi-logout"
<img size="x-large"
class="dwengo_logo" color="#0e6942"
:src="dwengo_logo" ></v-icon>
/>
<p class="caption">
{{ role }}
</p>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link <v-avatar
:to="`/${role}/${userId}/assignment`" size="large"
class="menu_item" color="#0e6942"
> style="font-size: large; font-weight: bold"
assignments >{{ initials }}</v-avatar
</router-link>
</li>
<li>
<router-link
:to="`/${role}/${userId}/class`"
class="menu_item"
>classes</router-link
> >
</li> </li>
<li> </div>
<router-link
:to="`/${role}/${userId}/discussion`"
class="menu_item"
>discussions</router-link
>
</li>
<li>log out</li>
<li class="initials">initials</li>
</ul>
</nav> </nav>
</main> </main>
</template> </template>
@ -62,6 +86,17 @@
<style scoped> <style scoped>
.menu { .menu {
background-color: #f6faf2; background-color: #f6faf2;
display: flex;
justify-content: space-between;
}
.right {
align-items: center;
padding: 10px;
}
.right li {
margin-left: 15px;
} }
nav ul { nav ul {
@ -69,13 +104,12 @@
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
gap: 10px; gap: 15px;
align-items: center; align-items: center;
} }
li { li {
display: inline; display: inline;
float: left;
} }
.dwengo_home { .dwengo_home {
@ -95,6 +129,7 @@
.menu_item { .menu_item {
color: #0e6942; color: #0e6942;
text-decoration: none; text-decoration: none;
font-size: large;
} }
nav a.router-link-active { nav a.router-link-active {