2 files changed, 113 insertions, 2 deletions
diff --git a/src-vue/src/App.vue b/src-vue/src/App.vue
index 411dd10e..97b20562 100644
--- a/src-vue/src/App.vue
+++ b/src-vue/src/App.vue
@@ -7,6 +7,7 @@ import SettingsView from './views/SettingsView.vue';
 import { ref } from "vue";
 import { store } from './plugins/store';
 import { invoke } from "@tauri-apps/api/core";
+import NotificationButton from "./components/NotificationButton.vue";
 
 const greetMsg = ref("");
 const name = ref("");
@@ -18,6 +19,11 @@ async function greet() {
 
 export default {
   components: {
+      ChangelogView,
+      DeveloperView,
+      PlayView,
+      SettingsView,
+      ModsView
   },
   data() {
     return {}
@@ -25,6 +31,8 @@ export default {
   mounted: async function() {
 
     // Initialize interface language
+    let lang = "en"
+    this.$root!.$i18n.locale = lang;
   },
   methods: {
     close() {
@@ -32,6 +40,11 @@ export default {
     }
   },
     computed: {
+      bgStyle(): string {
+          // @ts-ignore
+          const shouldBlur = this.$route.path !== "/";
+          return `filter: brightness(0.8) ${shouldBlur ? 'blur(5px)' : ''};`;
+      }
     }
 }
 </script>
@@ -42,9 +55,26 @@ export default {
 
     <nav id="fc_menu-bar"><!-- Hide menu bar in repair view -->
       <!-- Navigation items -->
+      <el-menu
+        :default-active="$route.path"
+        router
+        mode="horizontal"
+        id="fc__menu_items"
+        data-tauri-drag-region
+      >
+        <el-menu-item index="/">{{ $t('menu.play') }}</el-menu-item>
+        <el-menu-item index="/mods">{{ $t('menu.mods') }}</el-menu-item>
+        <el-menu-item index="/changelog">{{ $t('menu.changelog') }}</el-menu-item>
+        <el-menu-item index="/settings">{{ $t('menu.settings') }}</el-menu-item>
+      </el-menu>
+
+      <!-- Window controls -->
+      <div id="fc_window__controls">
+        <NotificationButton />
+        <el-button color="white" icon="SemiSelect" @click="minimize" circle />
+        <el-button color="white" icon="CloseBold" @click="close" circle />
+      </div>
     </nav>
-    <div class="row">
-    </div>
     <p>Click on the Tauri, Vite, and Vue logos to learn more.</p>
 
     <form class="row" @submit.prevent="greet">
diff --git a/src-vue/src/components/NotificationButton.vue b/src-vue/src/components/NotificationButton.vue
new file mode 100644
index 00000000..3835032d
--- /dev/null
+++ b/src-vue/src/components/NotificationButton.vue
@@ -0,0 +1,81 @@
+<template>
+    <el-dropdown trigger="click" placement="bottom-end" max-height="280" popper-class="fc_popper">
+        <el-badge v-if="notifications.length != 0" :value="notifications.length" :max="9" class="item" type="primary">
+            <el-button color="white" icon="BellFilled" circle />
+        </el-badge>
+        <el-button v-else color="white" icon="BellFilled" circle />
+        <template #dropdown>
+            <el-dropdown-menu :key="counter">
+                <el-alert
+                    v-if="notifications.length != 0"
+                    v-for="(notification, i) in notifications"
+                    :key="i"
+                    :title="notification.title"
+                    :description="notification.text"
+                    :type="notification.type"
+                    show-icon
+                    style="width: 300px"
+                    @close.stop="removeNotification(i)"
+                />
+                <el-result
+                    v-else
+                    icon="success"
+                    :title="i18n.global.tc('notification.no_new.title')"
+                    :sub-title="i18n.global.tc('notification.no_new.text')"
+                >
+                    <template #icon>
+                    </template>
+                </el-result>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import {Notification} from '../plugins/modules/notifications';
+import {i18n} from "../main";
+
+export default defineComponent({
+    name: 'NotificationButton',
+    data: () => ({
+        // This variable is used as a key for the dropdown menu, so we can force it to refresh when a item is deleted.
+        counter: 0
+    }),
+    computed: {
+        i18n() {
+            return i18n
+        },
+        notifications(): Notification[] {
+            return this.$store.state.notifications.notifications;
+        }
+    },
+    methods: {
+        removeNotification(index: number) {
+            this.$store.commit('removeNotification', index);
+            // By refreshing the notifications list, we ensure the first notification get the index 0, ensuring this list
+            // is synchronized with the store list.
+            this.counter += 1;
+        }
+    }
+})
+</script>
+
+<style scoped>
+.el-dropdown {
+    height: 100%;
+    max-height: 300px;
+}
+
+.el-button {
+    margin: auto 25px auto 0 !important;
+}
+
+.el-alert {
+    margin: 5px 10px 5px 5px;
+}
+
+.el-badge:deep(sup) {
+    transform: translate(-10px, 5px) !important;
+}
+</style>