Split Menu between md and smaller devices

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>
 

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">

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)