style: menubalk klapt in als het scherm te klein wordt om alle componenten te tonen
This commit is contained in:
Laure Jablonski
parent
3168112102
commit
29949462ed
1 changed files with 97 additions and 10 deletions
|
|
@ -9,14 +9,10 @@
|
||||||
|
|
||||||
const { t, locale } = useI18n();
|
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 role = auth.authState.activeRole;
|
||||||
|
|
||||||
const name : string = auth.authState.user!.profile.name!;
|
const name: string = auth.authState.user!.profile.name!;
|
||||||
const initials : string = name
|
const initials: string = name
|
||||||
.split(" ")
|
.split(" ")
|
||||||
.map((n) => n[0])
|
.map((n) => n[0])
|
||||||
.join("");
|
.join("");
|
||||||
|
|
@ -34,6 +30,8 @@
|
||||||
console.log(langCode);
|
console.log(langCode);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const drawer = ref(false);
|
||||||
|
|
||||||
// when the user wants to logout, the authentication must be set to False
|
// when the user wants to logout, the authentication must be set to False
|
||||||
function performLogout() {
|
function performLogout() {
|
||||||
auth.logout();
|
auth.logout();
|
||||||
|
|
@ -42,12 +40,85 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<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">
|
<nav class="menu">
|
||||||
<div class="left">
|
<div class="left">
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
<router-link
|
<router-link
|
||||||
:to="`${path}`"
|
to="/user"
|
||||||
class="dwengo_home"
|
class="dwengo_home"
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
|
|
@ -69,14 +140,14 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link
|
<router-link
|
||||||
:to="`${path}/class`"
|
to="/user/class"
|
||||||
class="menu_item"
|
class="menu_item"
|
||||||
>{{ t("classes") }}</router-link
|
>{{ t("classes") }}</router-link
|
||||||
>
|
>
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link
|
<router-link
|
||||||
:to="`${path}/discussion`"
|
to="/user/discussion"
|
||||||
class="menu_item"
|
class="menu_item"
|
||||||
>{{ t("discussions") }}
|
>{{ t("discussions") }}
|
||||||
</router-link>
|
</router-link>
|
||||||
|
|
@ -111,7 +182,11 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="right">
|
<div class="right">
|
||||||
<li>
|
<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
|
<v-tooltip
|
||||||
:text="t('logout')"
|
:text="t('logout')"
|
||||||
location="bottom"
|
location="bottom"
|
||||||
|
|
@ -192,4 +267,16 @@
|
||||||
nav a.router-link-active {
|
nav a.router-link-active {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 701px) {
|
||||||
|
.menu_collapsed {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
Reference in a new issue