Updates

app/components/TopStrip.vue

@@ -17,7 +17,7 @@
         </span>
       </slot>
     </span>
-    <span>
+    <span class="right">
       <slot name="right">
         <ClientOnly>
           <template v-if="memberData">
@@ -27,7 +27,7 @@
                 :src="`/ghosties/Ghost-${capitalize(memberData.avatar)}.png`"
                 :alt="memberData.name"
                 class="member-avatar"
-              />
+              >
               <svg
                 v-else
                 class="member-avatar default-ghost"
@@ -56,6 +56,10 @@
               </svg>
               {{ memberData.name }}
             </NuxtLink>
+            <span class="sep" aria-hidden="true">/</span>
+            <a href="#" class="sign-out" @click.prevent="handleLogout"
+              >sign out</a
+            >
           </template>
           <template v-else> The Baby Ghosts member program </template>
           <template #fallback> The Baby Ghosts member program </template>
@@ -70,7 +74,12 @@ const props = defineProps({
   pagePath: { type: String, default: "" },
 });
 
-const { memberData } = useAuth();
+const { memberData, logout } = useAuth();
+
+const handleLogout = async () => {
+  await logout();
+  navigateTo("/");
+};
 
 const capitalize = (str) => {
   if (!str) return "";
@@ -112,6 +121,9 @@ const breadcrumbs = computed(() => {
   gap: 6px;
   text-decoration: none;
 }
+.member-link:hover {
+  text-decoration: underline;
+}
 .member-avatar {
   width: 18px;
   height: 18px;
@@ -120,6 +132,23 @@ const breadcrumbs = computed(() => {
 .default-ghost {
   color: var(--border);
 }
+.right {
+  display: inline-flex;
+  align-items: center;
+}
+.sep {
+  color: var(--text-faint);
+  margin: 0 8px;
+}
+.top-strip a.sign-out {
+  font-size: 12px;
+  color: var(--ember);
+  text-decoration: none;
+}
+.top-strip a.sign-out:hover {
+  color: var(--ember);
+  text-decoration: underline;
+}
 
 .breadcrumb-nav {
   display: inline;