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);
@@ -30,13 +32,21 @@ function getAccountName(account : Account) {
 </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 }}
       </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>
@@ -46,7 +56,9 @@ function getAccountName(account : Account) {
           <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
+            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
+          >{{ getAccountName(account) }}</router-link>
           <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
@@ -56,7 +68,9 @@ function getAccountName(account : Account) {
           <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
+            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
+          >{{ getAccountName(account) }}</router-link>
           <Currency :class="ExpandMenu ? 'md:inline' : 'md:hidden'" :value="account.ClearedBalance" />
         </div>
       </li>
@@ -76,4 +90,5 @@ function getAccountName(account : Account) {
       </li>
       <!--<li><router-link to="/admin">Admin</router-link></li>-->
     </div>
+  </div>
 </template>