tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
Archived
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

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

@ -41,15 +41,32 @@
<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>
@ -80,33 +97,55 @@
</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>