Updates

app/components/AppNavigation.vue

@@ -25,11 +25,6 @@
                 />
               </NuxtLink>
             </li>
-            <li>
-              <a href="#" class="sign-out" @click.prevent="handleLogout"
-                >Sign out</a
-              >
-            </li>
           </ul>
 
           <div class="sidebar-section">Explore</div>
@@ -336,8 +331,8 @@ const exploreItems = [
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--candle);
-  margin-left: 6px;
+  background: var(--green);
+  margin-left: 0px;
   vertical-align: middle;
   transform: translateY(-1px);
 }

app/components/PrivacyToggle.vue

@@ -1,44 +0,0 @@
-<template>
-  <label class="priv">
-    <USwitch
-      :model-value="isPrivate"
-      aria-label="Private"
-      size="xs"
-      @update:model-value="onChange"
-    />
-    <span class="priv-label">Private</span>
-  </label>
-</template>
-
-<script setup>
-const props = defineProps({
-  modelValue: { type: String, default: "members" },
-});
-
-const emit = defineEmits(["update:modelValue"]);
-
-// Treat legacy "public" values as "members" (visible to signed-in members).
-const isPrivate = computed(() => props.modelValue === "private");
-
-const onChange = (val) => {
-  emit("update:modelValue", val ? "private" : "members");
-};
-</script>
-
-<style scoped>
-.priv {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 10px;
-  font-family: "Commit Mono", monospace;
-  letter-spacing: 0.04em;
-  color: var(--text-faint);
-  user-select: none;
-  cursor: pointer;
-}
-
-.priv-label {
-  line-height: 1;
-}
-</style>

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;