From d89e702669da2b08b1c6219a1a36ca24eca91e5b Mon Sep 17 00:00:00 2001
From: Jan Bader <jan@javil.eu>
Date: Fri, 4 Mar 2022 20:55:14 +0000
Subject: [PATCH] Move sidebar layout to BudgetSidebar

---
 web/src/App.vue                 | 10 +---
 web/src/pages/BudgetSidebar.vue | 99 +++++++++++++++++++--------------
 2 files changed, 59 insertions(+), 50 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index 2345236..057c1f2 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -8,7 +8,6 @@ import { useSettingsStore } from "./stores/settings";
 export default defineComponent({
     computed: {
         ...mapState(useBudgetsStore, ["CurrentBudgetName"]),
-        ...mapState(useSettingsStore, ["Menu"]),
         ...mapState(useSessionStore, ["LoggedIn"]),
     },
     methods: {
@@ -27,15 +26,10 @@ export default defineComponent({
 </script>
 
 <template>
-    <div class="flex flex-col md:flex-row flex-1">
-        <div
-            :class="[Menu.Expand ? 'md:w-72' : 'md:w-36', Menu.Show ? '' : 'hidden']"
-            class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
-        >
+    <div class="flex flex-col md:flex-row flex-1 h-screen">
             <router-view name="sidebar"></router-view>
-        </div>
 
-        <div class="flex-1">
+        <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"
diff --git a/web/src/pages/BudgetSidebar.vue b/web/src/pages/BudgetSidebar.vue
index 302c15b..e3e2045 100644
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@@ -5,7 +5,9 @@ import { useBudgetsStore } from "../stores/budget"
 import { Account, useAccountStore } from "../stores/budget-account"
 import { useSettingsStore } from "../stores/settings"
 
-const ExpandMenu = computed(() => useSettingsStore().Menu.Expand);
+const settings = useSettingsStore();
+const ExpandMenu = computed(() => settings.Menu.Expand);
+const ShowMenu = computed(() => settings.Menu.Show);
 
 const budgetStore = useBudgetsStore();
 const CurrentBudgetName = computed(() => budgetStore.CurrentBudgetName);
@@ -17,63 +19,76 @@ const OffBudgetAccounts = computed(() => accountStore.OffBudgetAccounts);
 const OnBudgetAccountsBalance = computed(() => accountStore.OnBudgetAccountsBalance);
 const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBalance);
 
-function isRecentlyReconciled(account : Account) {
+function isRecentlyReconciled(account: Account) {
   const now = new Date().getTime();
   const recently = 7 * 24 * 60 * 60 * 1000;
   return new Date(now - recently).getTime() < account.LastReconciled.getTime();
 }
 
-function getAccountName(account : Account) {
+function getAccountName(account: Account) {
   const reconciledMarker = isRecentlyReconciled(account) ? "" : " *";
   return account.Name + reconciledMarker;
 }
 </script>
 
 <template>
-  <div class="flex flex-col mt-14 md:mt-0">
-    <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>
-    <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 />
-      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
-      <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
-    </span>
-    <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" />
-      </div>
-      <div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
-        <router-link :to="'/budget/'+CurrentBudgetID+'/account/'+account.ID">{{getAccountName(account)}}</router-link>
-        <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" />
-      </div>
-      <div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
-        <router-link :to="'/budget/'+CurrentBudgetID+'/account/'+account.ID">{{getAccountName(account)}}</router-link>
-        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
-      </div>
-    </li>
-    <!--
+  <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 mt-14 md:mt-0">
+      <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>
+      <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 />
+        <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
+        <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
+      </span>
+      <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" />
+        </div>
+        <div v-for="account in OnBudgetAccounts" class="flex flex-row justify-between">
+          <router-link
+            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
+          >{{ getAccountName(account) }}</router-link>
+          <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" />
+        </div>
+        <div v-for="account in OffBudgetAccounts" class="flex flex-row justify-between">
+          <router-link
+            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
+          >{{ getAccountName(account) }}</router-link>
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
+        </div>
+      </li>
+      <!--
     <li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Closed Accounts</span>
       </div>
       + Add Account
     </li>
-    -->
-    <!--<li>
+      -->
+      <!--<li>
       <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
-    </li>-->
-    <li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
-      <router-link :to="'/budget/'+CurrentBudgetID+'/settings'">Budget-Settings</router-link>
-    </li>
-    <!--<li><router-link to="/admin">Admin</router-link></li>-->
-  </div>        
+      </li>-->
+      <li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
+        <router-link :to="'/budget/' + CurrentBudgetID + '/settings'">Budget-Settings</router-link>
+      </li>
+      <!--<li><router-link to="/admin">Admin</router-link></li>-->
+    </div>
+  </div>
 </template>