66 lines
2.1 KiB
Vue
66 lines
2.1 KiB
Vue
<script lang="ts">
|
|
import { mapState } from "pinia";
|
|
import { defineComponent } from "vue";
|
|
import { useBudgetsStore } from "./stores/budget";
|
|
import { useSessionStore } from "./stores/session";
|
|
import { useSettingsStore } from "./stores/settings";
|
|
|
|
export default defineComponent({
|
|
computed: {
|
|
...mapState(useBudgetsStore, ["CurrentBudgetName"]),
|
|
...mapState(useSettingsStore, ["Menu"]),
|
|
...mapState(useSessionStore, ["LoggedIn"]),
|
|
},
|
|
methods: {
|
|
logout() {
|
|
useSessionStore().logout();
|
|
this.$router.push("/login");
|
|
},
|
|
toggleMenu() {
|
|
useSettingsStore().toggleMenu();
|
|
},
|
|
toggleMenuSize() {
|
|
useSettingsStore().toggleMenuSize();
|
|
}
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="box-border w-full">
|
|
<div class="flex bg-gray-400 p-4 m-2 rounded-lg">
|
|
<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 class="mx-4" v-if="LoggedIn" to="/dashboard">Dashboard</router-link>
|
|
<router-link class="mx-4" v-if="!LoggedIn" to="/login">Login</router-link>
|
|
<a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col md:flex-row flex-1">
|
|
<div
|
|
:class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
|
|
class="md:block flex-shrink-0 w-full"
|
|
>
|
|
<router-view name="sidebar"></router-view>
|
|
</div>
|
|
|
|
<div class="flex-1 p-6">
|
|
<router-view></router-view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style>
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
</style>
|