From 95fcb9a586ce2db6486b4f1bde119d99dff5c7ec Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Mon, 7 Feb 2022 16:07:54 +0000
Subject: [PATCH] Split Menu between md and smaller devices

---
 web/src/App.vue                 | 8 ++++++--
 web/src/pages/BudgetSidebar.vue | 4 ++--
 web/src/store/index.ts          | 4 ++++
 3 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index d6cea96..b7fa1fb 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -15,6 +15,9 @@ export default defineComponent({
     },
     toggleMenu () {
       this.$store.commit("toggleMenu");
+    },
+    toggleMenuSize () {
+      this.$store.commit("toggleMenuSize");
     }
   },
   beforeCreate () {
@@ -26,7 +29,8 @@ export default defineComponent({
 <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" @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>
 
@@ -38,7 +42,7 @@ export default defineComponent({
     </div>
 
     <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>
       </div>
 
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 872e305..7ccba8c 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -23,14 +23,14 @@ export default defineComponent({
       On-Budget Accounts
       <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>
-        <Currency :value="account.Balance" />
+        <Currency v-if="$store.state.ExpandMenu" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
       Off-Budget Accounts
       <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>
-        <Currency :value="account.Balance" />
+        <Currency v-if="$store.state.ExpandMenu" :value="account.Balance" />
       </div>
     </li>
     <li class="bg-red-200 rounded-lg m-1 p-1 px-3">
diff --git a/web/src/store/index.ts b/web/src/store/index.ts
index da6ac5b..fb18638 100644
--- a/web/src/store/index.ts
+++ b/web/src/store/index.ts
@@ -10,6 +10,7 @@ export interface State {
         User?: string
     },
     ShowMenu?: boolean,
+    ExpandMenu?: boolean,
     Budgets: Map<string, Budget>,
     CurrentBudgetID?: string,
 }
@@ -39,6 +40,9 @@ export const store = createStore<State>({
         toggleMenu(state) {
             state.ShowMenu = !state.ShowMenu;
         },
+        toggleMenuSize(state) {
+            state.ExpandMenu = !state.ExpandMenu;
+        },
         initializeStore(state) {
             const store = localStorage.getItem("store");
             if (!store)