68 lines
1.3 KiB
Vue
68 lines
1.3 KiB
Vue
<script setup>
|
|
import MenuIcon from "./icons/menu-icon.vue";
|
|
import { computed } from "vue";
|
|
import { useRoute, useRouter, RouterLink } from "vue-router";
|
|
import { lastRoute } from "../store";
|
|
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const routeName = computed(() => route.name);
|
|
function goBack() {
|
|
if (routeName.value != "Settings") return;
|
|
if (lastRoute.value.name) router.go(-1);
|
|
else router.push("/timetable");
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="titlebar">
|
|
<span class="title">{{ routeName }}</span>
|
|
<div class="settings">
|
|
<RouterLink
|
|
to="/settings"
|
|
v-show="$route.name != 'Login'"
|
|
@click="goBack()"
|
|
>
|
|
<MenuIcon />
|
|
</RouterLink>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.titlebar {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 55px;
|
|
background-color: var(--titlebar-color);
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.title {
|
|
font-size: 25px;
|
|
padding-left: 13px;
|
|
}
|
|
|
|
.settings {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
padding-right: 13px;
|
|
}
|
|
|
|
a {
|
|
display: inherit;
|
|
text-decoration: none;
|
|
color: inherit;
|
|
padding: 4px;
|
|
}
|
|
|
|
a.router-link-active {
|
|
background-color: var(--titlebar-element-active-color);
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|