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

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

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