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

Split Menu between md and smaller devices

Browse Source
This commit is contained in:
Jan Bader 2022-02-07 16:07:54 +00:00
parent 3c1d83d8a2
commit 95fcb9a586
3 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/App.vue
View File

@ -15,6 +15,9 @@ export default defineComponent({
}, },
toggleMenu () { toggleMenu () {
this.$store.commit("toggleMenu"); this.$store.commit("toggleMenu");
},
toggleMenuSize () {
this.$store.commit("toggleMenuSize");
} }
}, },
beforeCreate () { beforeCreate () {
@ -26,7 +29,8 @@ export default defineComponent({
<template> <template>
<div class="box-border w-full"> <div class="box-border w-full">
<div class="flex bg-gray-400 p-4 m-2 rounded-lg"> <div class="flex bg-gray-400 p-4 m-2 rounded-lg">
<span class="flex-1 font-bold text-5xl -my-3" @click="toggleMenu">≡</span> <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">{{$store.getters.CurrentBudgetName}}</span> <span class="flex-1">{{$store.getters.CurrentBudgetName}}</span>
@ -38,7 +42,7 @@ export default defineComponent({
</div> </div>
<div class="flex flex-col md:flex-row flex-1"> <div class="flex flex-col md:flex-row flex-1">
<div :class="$store.state.ShowMenu ? 'visible' : 'hidden'" class="md:w-72 flex-shrink-0 w-full"> <div :class="($store.state.ExpandMenu ? 'md:w-72 ' : 'md:w-36 ') + ($store.state.ShowMenu ? '' : 'hidden')" class="md:block flex-shrink-0 w-full">
<router-view name="sidebar"></router-view> <router-view name="sidebar"></router-view>
</div> </div>

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

@ -23,14 +23,14 @@ export default defineComponent({
On-Budget Accounts On-Budget Accounts
<div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3"> <div v-for="account in $store.getters.OnBudgetAccounts" class="flex flex-row justify-between px-3">
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link> <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
<Currency :value="account.Balance" /> <Currency v-if="$store.state.ExpandMenu" :value="account.Balance" />
</div> </div>
</li> </li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3"> <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
Off-Budget Accounts Off-Budget Accounts
<div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3"> <div v-for="account in $store.getters.OffBudgetAccounts" class="flex flex-row justify-between px-3">
<router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link> <router-link :to="'/budget/'+budgetid+'/account/'+account.ID">{{account.Name}}</router-link>
<Currency :value="account.Balance" /> <Currency v-if="$store.state.ExpandMenu" :value="account.Balance" />
</div> </div>
</li> </li>
<li class="bg-red-200 rounded-lg m-1 p-1 px-3"> <li class="bg-red-200 rounded-lg m-1 p-1 px-3">

4
web/src/store/index.ts
View File

@ -10,6 +10,7 @@ export interface State {
User?: string User?: string
}, },
ShowMenu?: boolean, ShowMenu?: boolean,
ExpandMenu?: boolean,
Budgets: Map<string, Budget>, Budgets: Map<string, Budget>,
CurrentBudgetID?: string, CurrentBudgetID?: string,
} }
@ -39,6 +40,9 @@ export const store = createStore<State>({
toggleMenu(state) { toggleMenu(state) {
state.ShowMenu = !state.ShowMenu; state.ShowMenu = !state.ShowMenu;
}, },
toggleMenuSize(state) {
state.ExpandMenu = !state.ExpandMenu;
},
initializeStore(state) { initializeStore(state) {
const store = localStorage.getItem("store"); const store = localStorage.getItem("store");
if (!store) if (!store)