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