jacob1123/budgeteer
1
1
Fork 0
Code Issues 12 Pull Requests 1 Packages Releases 1 Wiki Activity

Extract MainMenu component

Browse Source
This commit is contained in:
Jan Bader 2022-04-19 20:46:58 +00:00
parent 4563fcbbaf
commit 65424a2587
3 changed files with 46 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
web/src/App.vue
View File

@ -1,28 +1,5 @@
<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(useSessionStore, ["LoggedIn"]),
},
methods: {
logout() {
useSessionStore().logout();
this.$router.push("/login");
},
toggleMenu() {
useSettingsStore().toggleMenu();
},
toggleMenuSize() {
useSettingsStore().toggleMenuSize();
}
},
})
<script lang="ts" setup>
import MainMenu from "./components/MainMenu.vue";
</script>
<template>
@ -30,42 +7,7 @@ export default defineComponent({
<router-view name="sidebar" />
<div class="flex-1 overflow-auto">
<div
class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md: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>
<MainMenu />
<div class="p-3 pl-6">
<router-view />

42
web/src/components/MainMenu.vue Normal file
View File

@ -0,0 +1,42 @@
<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();
}
</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>

2
web/src/pages/BudgetSidebar.vue
View File

@ -26,7 +26,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
:class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
>
<div class="flex flex-col mt-14 md:mt-0">
<div class="flex flex-col">
<span
class="m-2 p-1 px-3 h-10 overflow-hidden"
:class="[ExpandMenu ? 'text-2xl' : 'text-md']"