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

style: menubalk klapt in als het scherm te klein wordt om alle componenten te tonen

Browse source
This commit is contained in:
Laure Jablonski 2025-03-19 11:48:11 +01:00
parent 3168112102
commit 29949462ed
1 changed files with 97 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -9,14 +9,10 @@
const { t, locale } = useI18n();
// Instantiate variables to use in html to render right
// Links and content dependent on the role (student or teacher)
const path = "/user";
const role = auth.authState.activeRole;
const name : string = auth.authState.user!.profile.name!;
const initials : string = name
const name: string = auth.authState.user!.profile.name!;
const initials: string = name
.split(" ")
.map((n) => n[0])
.join("");
@ -34,6 +30,8 @@
console.log(langCode);
};
const drawer = ref(false);
// when the user wants to logout, the authentication must be set to False
function performLogout() {
auth.logout();
@ -42,12 +40,85 @@
<template>
<main>
<v-app class="menu_collapsed">
<v-app-bar app style="background-color: #f6faf2;">
<template v-slot:prepend>
<v-app-bar-nav-icon @click="drawer = !drawer" />
</template>
<v-app-bar-title>
<router-link to="/user" class="dwengo_home">
<img class="dwengo_logo" :src="dwengoLogo" style="width: 100px;" />
<p class="caption" style="font-size: smaller;">{{ t(`${role}`) }}</p>
</router-link>
</v-app-bar-title>
<v-spacer></v-spacer>
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn
v-bind="props"
icon
variant="text"
>
<v-icon
icon="mdi-translate"
size="small"
color="#0e6942"
></v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
v-for="(language, index) in languages"
:key="index"
@click="changeLanguage(language.code)"
>
<v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-btn @click="performLogout" text>
<v-tooltip :text="t('logout')" location="bottom">
<template v-slot:activator="{ props }">
<v-icon v-bind="props" icon="mdi-logout" size="x-large" color="#0e6942" />
</template>
</v-tooltip>
</v-btn>
</v-app-bar>
<v-navigation-drawer v-model="drawer" app>
<v-list>
<v-list-item to="/user/assignment" link>
<v-list-item-content>
<v-list-item-title>{{ t("assignments") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item to="/user/class" link>
<v-list-item-content>
<v-list-item-title>{{ t("classes") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
<v-list-item to="/user/discussion" link>
<v-list-item-content>
<v-list-item-title>{{ t("discussions") }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
</v-app>
<nav class="menu">
<div class="left">
<ul>
<li>
<router-link
:to="`${path}`"
to="/user"
class="dwengo_home"
>
<img
@ -69,14 +140,14 @@
</li>
<li>
<router-link
:to="`${path}/class`"
to="/user/class"
class="menu_item"
>{{ t("classes") }}</router-link
>
</li>
<li>
<router-link
:to="`${path}/discussion`"
to="/user/discussion"
class="menu_item"
>{{ t("discussions") }}
</router-link>
@ -111,7 +182,11 @@
</div>
<div class="right">
<li>
<v-btn @click="performLogout" to="/login" style="background-color: transparent; box-shadow: none !important;">
<v-btn
@click="performLogout"
to="/login"
style="background-color: transparent; box-shadow: none !important"
>
<v-tooltip
:text="t('logout')"
location="bottom"
@ -192,4 +267,16 @@
nav a.router-link-active {
font-weight: bold;
}
@media (max-width: 700px) {
.menu {
display: none;
}
}
@media (min-width: 701px) {
.menu_collapsed {
display: none;
}
}
</style>