Extract MainMenu component

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>