Fix mismatched button margins

client/src/components/Header.vue

@@ -2,7 +2,7 @@
 import ThemeToggle from './ThemeToggle.vue'
 
 const props = defineProps(['modelValue'])
-defineEmits(['update:modelValue'])
+const emit = defineEmits(['update:modelValue'])
 
 async function signout(ev) {
   ev.preventDefault()
@@ -16,6 +16,7 @@ async function signout(ev) {
   }
   let resp = await fetch(api_url, fetch_options)
   console.log(resp)
+  emit('update:modelValue', '')
   window.location.reload()
 }
 </script>
@@ -41,11 +42,10 @@ async function signout(ev) {
 
         <div class="offcanvas-body px-2">
           <ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
-            <!--<li v-if="modelValue !== ''" class="nav-item mx-2 mt-2">-->
+            <li v-if="modelValue.hasOwnProperty('username')" class="nav-item m-2">
-            <li v-if="modelValue.hasOwnProperty('username')" class="nav-item mx-2 mt-2">
               <button @click="signout" class="btn btn-outline-success">Sign out</button>
             </li>
-            <li class="nav-item mf-3 mt-1">
+            <li class="nav-item m-2">
               <div>
                 <ThemeToggle />
               </div>

client/src/components/Login.vue

@@ -22,7 +22,7 @@ async function login(ev) {
 
   let resp = await fetch(api_url, fetch_options)
   if (resp.ok) {
-    emit('update:modelValue', user.value)
+    emit('update:modelValue', await resp.json())
     window.location.hash = "/"
   } else {
     user.value = ''