Fix top bar menu

src/App.vue

@@ -3,9 +3,7 @@
                      :theme-overrides="theme === null ? lightThemeOverrides : darkThemeOverrides">
     <main>
       <div class="wrapper">
-        <div class="top-bar-wrapper">
-          <TopBarMenu @toggle-darkmode="toggleTheme()"/>
-        </div>
+        <TopBarMenu @toggle-darkmode="toggleTheme()"/>
         <div class="columns">
           <div id="main-column" class="column">
             <div class="top-main">
@@ -53,11 +51,6 @@
   flex-direction: column;
 }
 
-.top-bar-wrapper {
-  display: flex;
-  justify-content: center;
-}
-
 .columns {
   display: flex;
   flex-flow: row wrap;
@@ -124,6 +117,9 @@
 
   import './assets/logo-light.png';
 
+
+  document.title = 'RPCSX - PS4 Emulator';
+
   /**
    * @type import('naive-ui').GlobalThemeOverrides
    */
@@ -154,6 +150,7 @@
 
 
   export default defineComponent({
+    title: 'RPCSX - PS4 Emulator',
     methods: {
       // A hacky workaround to testing mobile
       toggleTheme() {

src/components/TopBarMenu.vue

@@ -1,38 +1,47 @@
+<script setup lang="ts">
+import { NIcon } from 'naive-ui'
+  import {
+    Code as CodeIcon,
+    Book as BookIcon,
+    LogoDiscord as DiscordIcon,
+    Moon as MoonIcon, Sun as SunIcon
+  } from '@vicons/carbon';
+</script>
+
 <template>
-  <div class="wrapper">
-    <darkModeButtonIcon/>
+  <div class="bar-wrapper">
     <n-button
     quaternary
     tag="a"
     href="https://rpcsx.github.io/rpcsx-site/">
       <img alt="Vue logo" class="logo" :src="getCoverURI()" width="32" height="32" />
     </n-button>
     <n-menu v-model:value="activeKey" mode="horizontal" :options="menuOptions" />
-    <n-button tertiary @click="toggleTheme()">
+    <n-button circle @click="toggleTheme()" class="dark-mode-button">
       <template #icon>
         <n-icon>
-          <Moon />
+          <MoonIcon />
         </n-icon>
       </template>
     </n-button>
   </div>
 </template>
 
 <style scoped>
-.wrapper {
+.bar-wrapper {
   display: inline-block;
+  flex-flow: row nowrap;
+  text-align: center;
   margin: 8px;
 }
+
+.dark-mode-button {
+  padding-left: 5px;
+}
+
 </style>
 
 <script lang="ts">
-  import { NIcon } from 'naive-ui'
-  import {
-    Code as CodeIcon,
-    Book as BookIcon,
-    LogoDiscord as DiscordIcon,
-    Moon, Sun
-  } from '@vicons/carbon'
   
   function renderIcon (icon: Component) {
     return () => h(NIcon, null, { default: () => h(icon) })

src/main.js

@@ -1,4 +1,4 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-createApp(App).mount('#app')
+const app = createApp(App).mount('#app')