45 lines
1.4 KiB
Vue
45 lines
1.4 KiB
Vue
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import { useRouter } from "vue-router";
|
|
import { useBudgetsStore } from "../stores/budget";
|
|
import { useSessionStore } from "../stores/session";
|
|
import { useSettingsStore } from "../stores/settings";
|
|
|
|
const router = useRouter();
|
|
|
|
const CurrentBudgetName = computed(() => useBudgetsStore().CurrentBudgetName);
|
|
const LoggedIn = computed(() => useSessionStore().LoggedIn);
|
|
function logout() {
|
|
useSessionStore().logout();
|
|
router.push("/login");
|
|
}
|
|
|
|
function toggleMenu() {
|
|
useSettingsStore().toggleMenu();
|
|
}
|
|
function toggleMenuSize() {
|
|
useSettingsStore().toggleMenuSize();
|
|
}
|
|
|
|
router.afterEach(function(to, from) {
|
|
useSettingsStore().Menu.Show = false;
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex bg-gray-400 dark:bg-gray-600 p-4 static top-0 left-0 w-full h-14">
|
|
<span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
|
|
<span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
|
|
<span class="flex-1">{{ CurrentBudgetName }}</span>
|
|
<div class="flex flex-1 flex-row justify-end -mx-4">
|
|
<router-link v-if="LoggedIn" class="mx-4" to="/dashboard">
|
|
Dashboard
|
|
</router-link>
|
|
<router-link v-if="!LoggedIn" class="mx-4" to="/login">
|
|
Login
|
|
</router-link>
|
|
<a v-if="LoggedIn" class="mx-4" @click="logout">Logout</a>
|
|
</div>
|
|
</div>
|
|
</template>
|