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

style: rol bewoog wanneer schermgrootte veranderde

Browse source
This commit is contained in:
Laure Jablonski 2025-03-19 20:00:05 +01:00
parent 532fab11db
commit 0b298a5543
1 changed files with 77 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -41,72 +41,111 @@
<template> <template>
<main> <main>
<v-app class="menu_collapsed"> <v-app class="menu_collapsed">
<v-app-bar app style="background-color: #f6faf2;"> <v-app-bar
app
style="background-color: #f6faf2"
>
<template v-slot:prepend> <template v-slot:prepend>
<v-app-bar-nav-icon @click="drawer = !drawer" /> <v-app-bar-nav-icon @click="drawer = !drawer" />
</template> </template>
<v-app-bar-title> <v-app-bar-title>
<router-link to="/user" class="dwengo_home"> <router-link
<img class="dwengo_logo" :src="dwengoLogo" style="width: 100px;" /> to="/user"
<p class="caption" style="font-size: smaller;">{{ t(`${role}`) }}</p> class="dwengo_home"
>
<div>
<img
class="dwengo_logo"
:src="dwengoLogo"
style="width: 100px"
/>
<p
class="caption"
style="font-size: smaller"
>
{{ t(`${role}`) }}
</p>
</div>
</router-link> </router-link>
</v-app-bar-title> </v-app-bar-title>
<v-spacer></v-spacer> <v-spacer></v-spacer>
<v-menu open-on-hover> <v-menu open-on-hover>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-btn <v-btn
v-bind="props" v-bind="props"
icon icon
variant="text" variant="text"
> >
<v-icon <v-icon
icon="mdi-translate" icon="mdi-translate"
size="small" size="small"
color="#0e6942" color="#0e6942"
></v-icon> ></v-icon>
</v-btn> </v-btn>
</template> </template>
<v-list> <v-list>
<v-list-item <v-list-item
v-for="(language, index) in languages" v-for="(language, index) in languages"
:key="index" :key="index"
@click="changeLanguage(language.code)" @click="changeLanguage(language.code)"
> >
<v-list-item-title>{{ language.name }}</v-list-item-title> <v-list-item-title>{{ language.name }}</v-list-item-title>
</v-list-item> </v-list-item>
</v-list> </v-list>
</v-menu> </v-menu>
<v-btn @click="performLogout" text> <v-btn
<v-tooltip :text="t('logout')" location="bottom"> @click="performLogout"
text
>
<v-tooltip
:text="t('logout')"
location="bottom"
>
<template v-slot:activator="{ props }"> <template v-slot:activator="{ props }">
<v-icon v-bind="props" icon="mdi-logout" size="x-large" color="#0e6942" /> <v-icon
v-bind="props"
icon="mdi-logout"
size="x-large"
color="#0e6942"
/>
</template> </template>
</v-tooltip> </v-tooltip>
</v-btn> </v-btn>
</v-app-bar> </v-app-bar>
<v-navigation-drawer v-model="drawer" app> <v-navigation-drawer
v-model="drawer"
app
>
<v-list> <v-list>
<v-list-item
<v-list-item to="/user/assignment" link> to="/user/assignment"
link
>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ t("assignments") }}</v-list-item-title> <v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item to="/user/class" link> <v-list-item
to="/user/class"
link
>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ t("classes") }}</v-list-item-title> <v-list-item-title class="menu_item">{{ t("classes") }}</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
<v-list-item to="/user/discussion" link> <v-list-item
to="/user/discussion"
link
>
<v-list-item-content> <v-list-item-content>
<v-list-item-title>{{ t("discussions") }}</v-list-item-title> <v-list-item-title class="menu_item">{{ t("discussions") }}</v-list-item-title>
</v-list-item-content> </v-list-item-content>
</v-list-item> </v-list-item>
</v-list> </v-list>