Move sidebar layout to BudgetSidebar

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="flex flex-col md:flex-row flex-1 h-screen">
-        <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"
-        >
             <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"

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,47 +19,59 @@ 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="[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']">
+      <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}}
+        {{ 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 + '/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" />
+          <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>
+          <router-link
-        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
+            :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" />
+          <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>
+          <router-link
-        <Currency :class="ExpandMenu?'md:inline':'md:hidden'" :value="account.ClearedBalance" />
+            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
+          >{{ getAccountName(account) }}</router-link>
+          <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
       <!--
@@ -72,8 +86,9 @@ function getAccountName(account : Account) {
       <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>
+        <router-link :to="'/budget/' + CurrentBudgetID + '/settings'">Budget-Settings</router-link>
       </li>
       <!--<li><router-link to="/admin">Admin</router-link></li>-->
     </div>
+  </div>
 </template>