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

feat(frontend): menubar code opgekuist en stijl aangepast

Browse source
This commit is contained in:
Laure Jablonski 2025-02-28 10:55:15 +01:00
parent 3ffb067859
commit 94f36e36c9
1 changed files with 87 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,80 +1,103 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import dwengo_logo from "../../../assets/img/dwengo-groen-zwart.svg"; import dwengo_logo from "../../../assets/img/dwengo-groen-zwart.svg";
const route = useRoute(); const route = useRoute();
const teacher = computed(() => route.path.includes("teacher"));
const id = computed(() => route.params.id as string); const isTeacher = route.path.includes("teacher");
const role = isTeacher ? "teacher" : "student";
const name = "Bob Debouwer"; // TODO: naam opvragen
const userId = computed(() => route.params.id as string);
</script> </script>
<template> <template>
<main> <main>
<div class="menu-bar"> <nav class="menu">
<nav>
<ul> <ul>
<li class="img_with_text"> <li>
<router-link :to="`/student/${id}/home`"> <router-link
<div> :to="`/${role}/${userId}`"
<img :src="dwengo_logo"/> class="dwengo_home"
<p class="caption"><span>{{ teacher ? "teacher" : "student" }}</span></p> >
</div> <img
class="dwengo_logo"
:src="dwengo_logo"
/>
<p class="caption">
{{ role }}
</p>
</router-link> </router-link>
</li> </li>
<li> <li>
<router-link v-if="teacher" class="link" :to="`/teacher/${id}/assignment`">assignments</router-link> <router-link
<router-link v-else class="link" :to="`/student/${id}/assignment`">assignments</router-link> :to="`/${role}/${userId}/assignment`"
class="menu_item"
>
assignments
</router-link>
</li> </li>
<li> <li>
<router-link v-if="teacher" class="link" :to="`/teacher/${id}/class`">classes</router-link> <router-link
<router-link v-else class="link" :to="`/student/${id}/class`">classes</router-link> :to="`/${role}/${userId}/class`"
class="menu_item"
>classes</router-link
>
</li> </li>
<li> <li>
<router-link v-if="teacher" class="link" :to="`/teacher/${id}/discussion`">discussions</router-link> <router-link
<router-link v-else class="link" :to="`/student/${id}/discussion`">discussions</router-link> :to="`/${role}/${userId}/discussion`"
class="menu_item"
>discussions</router-link
>
</li> </li>
<li>log out</li>
<li class="initials">initials</li>
</ul> </ul>
</nav> </nav>
<router-view /> </main>
</div>
</main>
</template> </template>
<style scoped> <style scoped>
.menu {
background-color: #f6faf2;
}
.menu-bar { nav ul {
background: #F6FAF2;
}
nav ul {
display: flex; display: flex;
list-style: none; list-style-type: none;
padding: 1%; margin: 0;
gap: 2%; padding: 0;
} gap: 10px;
align-items: center;
}
img { li {
max-width: 20%; display: inline;
height: auto; float: left;
} }
.link { .dwengo_home {
color: #0E6942;
}
nav a.router-link-active {
font-weight: bolder;
}
.img_with_text {
text-align: center; text-align: center;
display: block; text-decoration: none;
} }
.caption { .dwengo_logo {
width: 150px;
}
.caption {
color: black; color: black;
margin-top: -4%; margin-top: -25px;
} }
.menu_item {
color: #0e6942;
text-decoration: none;
}
nav a.router-link-active {
font-weight: bold;
}
</style> </style>