<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>
