Extract MainMenu component

web/src/App.vue

@@ -1,28 +1,5 @@
-<script lang="ts">
+<script lang="ts" setup>
-import { mapState } from "pinia";
+import MainMenu from "./components/MainMenu.vue";
-import { defineComponent } from "vue";
-import { useBudgetsStore } from "./stores/budget";
-import { useSessionStore } from "./stores/session";
-import { useSettingsStore } from "./stores/settings";
-
-export default defineComponent({
-    computed: {
-        ...mapState(useBudgetsStore, ["CurrentBudgetName"]),
-        ...mapState(useSessionStore, ["LoggedIn"]),
-    },
-    methods: {
-        logout() {
-            useSessionStore().logout();
-            this.$router.push("/login");
-        },
-        toggleMenu() {
-            useSettingsStore().toggleMenu();
-        },
-        toggleMenuSize() {
-            useSettingsStore().toggleMenuSize();
-        }
-    },
-})
 </script>
 
 <template>
@@ -30,42 +7,7 @@ export default defineComponent({
     <router-view name="sidebar" />
 
     <div class="flex-1 overflow-auto">
-      <div
+      <MainMenu />
-        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"
-          @click="toggleMenuSize"
-        >≡</span>
-        <span
-          class="flex-1 font-bold text-5xl -my-3 md:hidden"
-          @click="toggleMenu"
-        >≡</span>
-
-        <span class="flex-1">{{ CurrentBudgetName }}</span>
-
-        <div class="flex flex-1 flex-row justify-end -mx-4">
-          <router-link
-            v-if="LoggedIn"
-            class="mx-4"
-            to="/dashboard"
-          >
-            Dashboard
-          </router-link>
-          <router-link
-            v-if="!LoggedIn"
-            class="mx-4"
-            to="/login"
-          >
-            Login
-          </router-link>
-          <a
-            v-if="LoggedIn"
-            class="mx-4"
-            @click="logout"
-          >Logout</a>
-        </div>
-      </div>
 
       <div class="p-3 pl-6">
         <router-view />

web/src/components/MainMenu.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { useBudgetsStore } from "../stores/budget";
+import { useSessionStore } from "../stores/session";
+import { useSettingsStore } from "../stores/settings";
+
+const router = useRouter();
+
+const CurrentBudgetName = computed(() => useBudgetsStore().CurrentBudgetName);
+const LoggedIn = computed(() => useSessionStore().LoggedIn);
+function logout() {
+    useSessionStore().logout();
+    router.push("/login");
+}
+
+function toggleMenu() {
+    useSettingsStore().toggleMenu();
+}
+function toggleMenuSize() {
+    useSettingsStore().toggleMenuSize();
+}
+</script>
+
+<template>
+    <div class="flex bg-gray-400 dark:bg-gray-600 p-4 static top-0 left-0 w-full h-14">
+        <span class="flex-1 font-bold text-5xl -my-3 hidden md:inline" @click="toggleMenuSize">≡</span>
+        <span class="flex-1 font-bold text-5xl -my-3 md:hidden" @click="toggleMenu">≡</span>
+
+        <span class="flex-1">{{ CurrentBudgetName }}</span>
+
+        <div class="flex flex-1 flex-row justify-end -mx-4">
+            <router-link v-if="LoggedIn" class="mx-4" to="/dashboard">
+                Dashboard
+            </router-link>
+            <router-link v-if="!LoggedIn" class="mx-4" to="/login">
+                Login
+            </router-link>
+            <a v-if="LoggedIn" class="mx-4" @click="logout">Logout</a>
+        </div>
+    </div>
+</template>

web/src/pages/BudgetSidebar.vue

@@ -26,7 +26,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
     :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">
+    <div class="flex flex-col">
       <span
         class="m-2 p-1 px-3 h-10 overflow-hidden"
         :class="[ExpandMenu ? 'text-2xl' : 'text-md']"