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"> <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>
<li class="img_with_text"> <router-link
<router-link :to="`/student/${id}/home`"> :to="`/${role}/${userId}`"
<div> class="dwengo_home"
<img :src="dwengo_logo"/> >
<p class="caption"><span>{{ teacher ? "teacher" : "student" }}</span></p> <img
</div> class="dwengo_logo"
</router-link> :src="dwengo_logo"
</li> />
<li> <p class="caption">
<router-link v-if="teacher" class="link" :to="`/teacher/${id}/assignment`">assignments</router-link> {{ role }}
<router-link v-else class="link" :to="`/student/${id}/assignment`">assignments</router-link> </p>
</li> </router-link>
<li> </li>
<router-link v-if="teacher" class="link" :to="`/teacher/${id}/class`">classes</router-link> <li>
<router-link v-else class="link" :to="`/student/${id}/class`">classes</router-link> <router-link
</li> :to="`/${role}/${userId}/assignment`"
<li> class="menu_item"
<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> assignments
</li> </router-link>
</ul> </li>
</nav> <li>
<router-view /> <router-link
</div> :to="`/${role}/${userId}/class`"
</main> 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> </template>
<style scoped> <style scoped>
.menu {
background-color: #f6faf2;
}
.menu-bar { nav ul {
background: #F6FAF2; display: flex;
} list-style-type: none;
margin: 0;
padding: 0;
gap: 10px;
align-items: center;
}
nav ul { li {
display: flex; display: inline;
list-style: none; float: left;
padding: 1%; }
gap: 2%;
}
img { .dwengo_home {
max-width: 20%; text-align: center;
height: auto; text-decoration: none;
} }
.link { .dwengo_logo {
color: #0E6942; width: 150px;
} }
nav a.router-link-active { .caption {
font-weight: bolder; color: black;
} margin-top: -25px;
}
.img_with_text {
text-align: center;
display: block;
}
.caption {
color: black;
margin-top: -4%;
}
.menu_item {
color: #0e6942;
text-decoration: none;
}
nav a.router-link-active {
font-weight: bold;
}
</style> </style>