fix(frontend): Menubalk niet tonen voor niet-aangemeldde gebruikers
Dit lost de fout op.
This commit is contained in:
Gerald Schmittinger
parent
25cacb048b
commit
d29e2af31f
4 changed files with 497 additions and 238 deletions
|
|
@ -1,10 +1,29 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import auth from "@/services/auth/auth-service.ts";
|
import auth from "@/services/auth/auth-service.ts";
|
||||||
|
import MenuBar from "@/components/MenuBar.vue";
|
||||||
|
import {useRoute} from "vue-router";
|
||||||
|
import {computed} from "vue";
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
auth.loadUser();
|
auth.loadUser();
|
||||||
|
|
||||||
|
interface RouteMeta {
|
||||||
|
requiresAuth?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const showMenuBar = computed(() =>
|
||||||
|
(route.meta as RouteMeta).requiresAuth in [false, undefined]
|
||||||
|
&& auth.authState.user
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<router-view />
|
<v-app>
|
||||||
|
<menu-bar v-if="showMenuBar"></menu-bar>
|
||||||
|
<v-main>
|
||||||
|
<router-view />
|
||||||
|
</v-main>
|
||||||
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped></style>
|
<style scoped></style>
|
||||||
|
|
|
||||||
367
frontend/src/components/MenuBar.old.vue
Normal file
367
frontend/src/components/MenuBar.old.vue
Normal file
|
|
@ -0,0 +1,367 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { useI18n } from "vue-i18n";
|
||||||
|
|
||||||
|
import auth from "@/services/auth/auth-service.ts";
|
||||||
|
|
||||||
|
// Import assets
|
||||||
|
import dwengoLogo from "../../../assets/img/dwengo-groen-zwart.svg";
|
||||||
|
|
||||||
|
const { t, locale } = useI18n();
|
||||||
|
|
||||||
|
const role = auth.authState.activeRole;
|
||||||
|
|
||||||
|
const name: string = auth.authState.user!.profile.name!;
|
||||||
|
const initials: string = name
|
||||||
|
.split(" ")
|
||||||
|
.map((n) => n[0])
|
||||||
|
.join("");
|
||||||
|
|
||||||
|
// Available languages
|
||||||
|
const languages = ref([
|
||||||
|
{ name: "English", code: "en" },
|
||||||
|
{ name: "Nederlands", code: "nl" },
|
||||||
|
{ name: "Français", code: "fr" },
|
||||||
|
{ name: "Deutsch", code: "de" }
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Logic to change the language of the website to the selected language
|
||||||
|
const changeLanguage = (langCode: string) => {
|
||||||
|
locale.value = langCode;
|
||||||
|
localStorage.setItem("user-lang", langCode);
|
||||||
|
};
|
||||||
|
|
||||||
|
// contains functionality to let the collapsed menu appear and disappear
|
||||||
|
// when the screen size varies
|
||||||
|
const drawer = ref(false);
|
||||||
|
|
||||||
|
// when the user wants to logout, a popup is shown to verify this
|
||||||
|
// if verified, the user should be logged out
|
||||||
|
const performLogout = () => {
|
||||||
|
auth.logout();
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<div 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"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="dwengo_logo"
|
||||||
|
:src="dwengoLogo"
|
||||||
|
style="width: 100px"
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
class="caption"
|
||||||
|
style="font-size: smaller"
|
||||||
|
>
|
||||||
|
{{ t(`${role}`) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</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 class="menu_item">{{ 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 class="menu_item">{{ 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 class="menu_item">{{ t("discussions") }}</v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-navigation-drawer>
|
||||||
|
</div>
|
||||||
|
<v-app-bar app>
|
||||||
|
<nav class="menu">
|
||||||
|
<div class="left">
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
to="/user"
|
||||||
|
class="dwengo_home"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="dwengo_logo"
|
||||||
|
:src="dwengoLogo"
|
||||||
|
/>
|
||||||
|
<p class="caption">
|
||||||
|
{{ t(`${role}`) }}
|
||||||
|
</p>
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
:to="`/user/assignment`"
|
||||||
|
class="menu_item"
|
||||||
|
>
|
||||||
|
{{ t("assignments") }}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
to="/user/class"
|
||||||
|
class="menu_item"
|
||||||
|
>{{ t("classes") }}</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link
|
||||||
|
to="/user/discussion"
|
||||||
|
class="menu_item"
|
||||||
|
>{{ t("discussions") }}
|
||||||
|
</router-link>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<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>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="right">
|
||||||
|
<li>
|
||||||
|
<!-- <v-btn
|
||||||
|
@click="performLogout"
|
||||||
|
to="/login"
|
||||||
|
style="background-color: transparent; box-shadow: none !important"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
></v-icon>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
</v-btn> -->
|
||||||
|
<v-dialog max-width="500">
|
||||||
|
<template v-slot:activator="{ props: activatorProps }">
|
||||||
|
<v-btn
|
||||||
|
v-bind="activatorProps"
|
||||||
|
style="background-color: transparent; box-shadow: none !important"
|
||||||
|
>
|
||||||
|
<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"
|
||||||
|
>
|
||||||
|
</v-icon>
|
||||||
|
</template>
|
||||||
|
</v-tooltip>
|
||||||
|
</v-btn>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-slot:default="{ isActive }">
|
||||||
|
<v-card :title="t('logoutVerification')">
|
||||||
|
<v-card-actions>
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
:text="t('cancel')"
|
||||||
|
@click="isActive.value = false"
|
||||||
|
></v-btn>
|
||||||
|
<v-btn
|
||||||
|
:text="t('logout')"
|
||||||
|
@click="performLogout"
|
||||||
|
to="/login"
|
||||||
|
></v-btn>
|
||||||
|
</v-card-actions>
|
||||||
|
</v-card>
|
||||||
|
</template>
|
||||||
|
</v-dialog>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<v-avatar
|
||||||
|
size="large"
|
||||||
|
color="#0e6942"
|
||||||
|
style="font-size: large; font-weight: bold"
|
||||||
|
>{{ initials }}</v-avatar
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
</v-app-bar>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.menu {
|
||||||
|
background-color: #f6faf2;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
align-items: center;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right li {
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav ul {
|
||||||
|
display: flex;
|
||||||
|
list-style-type: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
gap: 15px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dwengo_home {
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dwengo_logo {
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.caption {
|
||||||
|
color: black;
|
||||||
|
margin-top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu_item {
|
||||||
|
color: #0e6942;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: large;
|
||||||
|
}
|
||||||
|
|
||||||
|
nav a.router-link-active {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 700px) {
|
||||||
|
.menu {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (min-width: 701px) {
|
||||||
|
.menu_collapsed {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -43,67 +43,78 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
<v-app-bar class="app-bar" app>
|
||||||
<v-app class="menu_collapsed">
|
<v-app-bar-nav-icon class="menu_collapsed" @click="drawer = !drawer" />
|
||||||
<v-app-bar
|
<router-link
|
||||||
app
|
to="/user"
|
||||||
style="background-color: #f6faf2"
|
class="dwengo_home"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<img
|
||||||
|
class="dwengo_logo"
|
||||||
|
:src="dwengoLogo"
|
||||||
|
/>
|
||||||
|
<p
|
||||||
|
class="caption"
|
||||||
|
>
|
||||||
|
{{ t(`${role}`) }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</router-link>
|
||||||
|
<v-toolbar-items class="menu">
|
||||||
|
<v-btn
|
||||||
|
class="menu_item"
|
||||||
|
variant="text"
|
||||||
|
to="/user/assignment"
|
||||||
>
|
>
|
||||||
<template v-slot:prepend>
|
{{ t("assignments") }}
|
||||||
<v-app-bar-nav-icon @click="drawer = !drawer" />
|
</v-btn>
|
||||||
</template>
|
<v-btn
|
||||||
|
class="menu_item"
|
||||||
<v-app-bar-title>
|
variant="text"
|
||||||
<router-link
|
to="/user/class"
|
||||||
to="/user"
|
>
|
||||||
class="dwengo_home"
|
{{ t("classes") }}
|
||||||
|
</v-btn>
|
||||||
|
<v-btn
|
||||||
|
class="menu_item"
|
||||||
|
variant="text"
|
||||||
|
to="/user/discussion"
|
||||||
|
>
|
||||||
|
{{ t("discussions") }}
|
||||||
|
</v-btn>
|
||||||
|
<v-menu open-on-hover>
|
||||||
|
<template v-slot:activator="{ props }">
|
||||||
|
<v-btn
|
||||||
|
v-bind="props"
|
||||||
|
icon
|
||||||
|
variant="text"
|
||||||
>
|
>
|
||||||
<div>
|
<v-icon
|
||||||
<img
|
icon="mdi-translate"
|
||||||
class="dwengo_logo"
|
size="small"
|
||||||
:src="dwengoLogo"
|
color="#0e6942"
|
||||||
style="width: 100px"
|
></v-icon>
|
||||||
/>
|
</v-btn>
|
||||||
<p
|
</template>
|
||||||
class="caption"
|
<v-list>
|
||||||
style="font-size: smaller"
|
<v-list-item
|
||||||
>
|
v-for="(language, index) in languages"
|
||||||
{{ t(`${role}`) }}
|
:key="index"
|
||||||
</p>
|
@click="changeLanguage(language.code)"
|
||||||
</div>
|
>
|
||||||
</router-link>
|
<v-list-item-title>{{ language.name }}</v-list-item-title>
|
||||||
</v-app-bar-title>
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
<v-spacer></v-spacer>
|
</v-menu>
|
||||||
|
</v-toolbar-items>
|
||||||
<v-menu open-on-hover>
|
<v-spacer></v-spacer>
|
||||||
<template v-slot:activator="{ props }">
|
<v-dialog max-width="500">
|
||||||
<v-btn
|
<template v-slot:activator="{ props: activatorProps }">
|
||||||
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
|
<v-btn
|
||||||
@click="performLogout"
|
v-bind="activatorProps"
|
||||||
text
|
:rounded="true"
|
||||||
|
variant="text"
|
||||||
>
|
>
|
||||||
<v-tooltip
|
<v-tooltip
|
||||||
:text="t('logout')"
|
:text="t('logout')"
|
||||||
|
|
@ -115,197 +126,54 @@
|
||||||
icon="mdi-logout"
|
icon="mdi-logout"
|
||||||
size="x-large"
|
size="x-large"
|
||||||
color="#0e6942"
|
color="#0e6942"
|
||||||
/>
|
>
|
||||||
|
</v-icon>
|
||||||
</template>
|
</template>
|
||||||
</v-tooltip>
|
</v-tooltip>
|
||||||
</v-btn>
|
</v-btn>
|
||||||
</v-app-bar>
|
</template>
|
||||||
|
|
||||||
<v-navigation-drawer
|
<template v-slot:default="{ isActive }">
|
||||||
v-model="drawer"
|
<v-card :title="t('logoutVerification')">
|
||||||
app
|
<v-card-actions>
|
||||||
>
|
<v-spacer></v-spacer>
|
||||||
<v-list>
|
|
||||||
<v-list-item
|
|
||||||
to="/user/assignment"
|
|
||||||
link
|
|
||||||
>
|
|
||||||
<v-list-item-content>
|
|
||||||
<v-list-item-title class="menu_item">{{ t("assignments") }}</v-list-item-title>
|
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
|
||||||
|
|
||||||
<v-list-item
|
<v-btn
|
||||||
to="/user/class"
|
:text="t('cancel')"
|
||||||
link
|
@click="isActive.value = false"
|
||||||
>
|
></v-btn>
|
||||||
<v-list-item-content>
|
<v-btn
|
||||||
<v-list-item-title class="menu_item">{{ 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 class="menu_item">{{ 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="/user"
|
|
||||||
class="dwengo_home"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="dwengo_logo"
|
|
||||||
:src="dwengoLogo"
|
|
||||||
/>
|
|
||||||
<p class="caption">
|
|
||||||
{{ t(`${role}`) }}
|
|
||||||
</p>
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link
|
|
||||||
:to="`/user/assignment`"
|
|
||||||
class="menu_item"
|
|
||||||
>
|
|
||||||
{{ t("assignments") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link
|
|
||||||
to="/user/class"
|
|
||||||
class="menu_item"
|
|
||||||
>{{ t("classes") }}</router-link
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link
|
|
||||||
to="/user/discussion"
|
|
||||||
class="menu_item"
|
|
||||||
>{{ t("discussions") }}
|
|
||||||
</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<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>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="right">
|
|
||||||
<li>
|
|
||||||
<!-- <v-btn
|
|
||||||
@click="performLogout"
|
|
||||||
to="/login"
|
|
||||||
style="background-color: transparent; box-shadow: none !important"
|
|
||||||
>
|
|
||||||
<v-tooltip
|
|
||||||
:text="t('logout')"
|
:text="t('logout')"
|
||||||
location="bottom"
|
@click="performLogout"
|
||||||
>
|
to="/login"
|
||||||
<template v-slot:activator="{ props }">
|
></v-btn>
|
||||||
<v-icon
|
</v-card-actions>
|
||||||
v-bind="props"
|
</v-card>
|
||||||
icon="mdi-logout"
|
</template>
|
||||||
size="x-large"
|
</v-dialog>
|
||||||
color="#0e6942"
|
<v-avatar
|
||||||
></v-icon>
|
size="large"
|
||||||
</template>
|
color="#0e6942"
|
||||||
</v-tooltip>
|
class="user-button"
|
||||||
</v-btn> -->
|
>{{ initials }}</v-avatar
|
||||||
<v-dialog max-width="500">
|
>
|
||||||
<template v-slot:activator="{ props: activatorProps }">
|
</v-app-bar>
|
||||||
<v-btn
|
|
||||||
v-bind="activatorProps"
|
|
||||||
style="background-color: transparent; box-shadow: none !important"
|
|
||||||
>
|
|
||||||
<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"
|
|
||||||
>
|
|
||||||
</v-icon>
|
|
||||||
</template>
|
|
||||||
</v-tooltip>
|
|
||||||
</v-btn>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<template v-slot:default="{ isActive }">
|
|
||||||
<v-card :title="t('logoutVerification')">
|
|
||||||
<v-card-actions>
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
:text="t('cancel')"
|
|
||||||
@click="isActive.value = false"
|
|
||||||
></v-btn>
|
|
||||||
<v-btn
|
|
||||||
:text="t('logout')"
|
|
||||||
@click="performLogout"
|
|
||||||
to="/login"
|
|
||||||
></v-btn>
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
|
||||||
</template>
|
|
||||||
</v-dialog>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<v-avatar
|
|
||||||
size="large"
|
|
||||||
color="#0e6942"
|
|
||||||
style="font-size: large; font-weight: bold"
|
|
||||||
>{{ initials }}</v-avatar
|
|
||||||
>
|
|
||||||
</li>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<router-view />
|
|
||||||
</main>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.app-bar {
|
||||||
|
background-color: #f6faf2;
|
||||||
|
}
|
||||||
.menu {
|
.menu {
|
||||||
background-color: #f6faf2;
|
background-color: #f6faf2;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
.user-button {
|
||||||
|
margin-right: 10px;
|
||||||
|
font-size: large;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
.right {
|
.right {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -347,6 +215,7 @@
|
||||||
color: #0e6942;
|
color: #0e6942;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: large;
|
font-size: large;
|
||||||
|
text-transform: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a.router-link-active {
|
nav a.router-link-active {
|
||||||
|
|
@ -357,6 +226,12 @@
|
||||||
.menu {
|
.menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
.caption {
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.dwengo_logo {
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 701px) {
|
@media (min-width: 701px) {
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,4 @@
|
||||||
import { createRouter, createWebHistory } from "vue-router";
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
import MenuBar from "@/components/MenuBar.vue";
|
|
||||||
import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
|
import SingleAssignment from "@/views/assignments/SingleAssignment.vue";
|
||||||
import SingleClass from "@/views/classes/SingleClass.vue";
|
import SingleClass from "@/views/classes/SingleClass.vue";
|
||||||
import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
|
import SingleDiscussion from "@/views/discussions/SingleDiscussion.vue";
|
||||||
|
|
@ -38,7 +37,6 @@ const router = createRouter({
|
||||||
|
|
||||||
{
|
{
|
||||||
path: "/user",
|
path: "/user",
|
||||||
component: MenuBar,
|
|
||||||
meta: { requiresAuth: true },
|
meta: { requiresAuth: true },
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue