From 5c5429ab05c17569e255470b31f6ef37b4ad93a8 Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Tue, 19 Apr 2022 20:59:18 +0000
Subject: [PATCH] Fix Header overlapping content mobile

---
 web/src/pages/BudgetSidebar.vue | 59 +++++++++++----------------------
 1 file changed, 19 insertions(+), 40 deletions(-)

diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 571b582..2301bf6 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -19,24 +19,23 @@ const OnBudgetAccounts = computed(() => accountStore.OnBudgetAccounts);
 const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
 const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
 const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
+
+function toggleMenu() {
+  useSettingsStore().toggleMenu();
+}
 </script>
 
 <template>
-  <div
-    :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="[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">
-      <span
-        class="m-2 p-1 px-3 h-10 overflow-hidden"
-        :class="[ExpandMenu ? 'text-2xl' : 'text-md']"
-      >
-        <router-link
-          to="/dashboard"
-          style="font-size: 150%"
-        >⌂</router-link>
-        {{ CurrentBudgetName }}
-      </span>
+      <div class="m-2 md:px-3 p-1">
+        <span class="font-bold-my-3 md:hidden font-bold text-5xl pr-3" @click="toggleMenu">≡</span>
+        <span class="h-10 overflow-hidden" :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
+          <router-link to="/dashboard" class="text-5xl">⌂</router-link>
+          {{ CurrentBudgetName }}
+        </span>
+      </div>
       <span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
         <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link>
         <br>
@@ -46,41 +45,21 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
         <div class="flex flex-row justify-between font-bold">
           <span>On-Budget Accounts</span>
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="OnBudgetAccountsBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OnBudgetAccountsBalance" />
         </div>
-        <div
-          v-for="account in OnBudgetAccounts"
-          :key="account.ID"
-          class="flex flex-row justify-between"
-        >
+        <div v-for="account in OnBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
           <AccountWithReconciled :account="account" />
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="account.ClearedBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
         <div class="flex flex-row justify-between font-bold">
           <span>Off-Budget Accounts</span>
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="OffBudgetAccountsBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="OffBudgetAccountsBalance" />
         </div>
-        <div
-          v-for="account in OffBudgetAccounts"
-          :key="account.ID"
-          class="flex flex-row justify-between"
-        >
+        <div v-for="account in OffBudgetAccounts" :key="account.ID" class="flex flex-row justify-between">
           <AccountWithReconciled :account="account" />
-          <Currency
-            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-            :value="account.ClearedBalance"
-          />
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
       <!--